使用jQuery和CSS3实现的超炫3D画廊特效

开发 前端
今天我们分享一款使用jQuery和CSS3实现的3D环廊展示特效,这个3D特效使用CSS3的3D变化特性实现,简单而非常华丽,希望大家喜欢!

在线演示 本地下载

今天我们分享一款使用jQuery和CSS3实现的3D环廊展示特效,这个3D特效使用CSS3的3D变化特性实现,简单而非常华丽,希望大家喜欢!

使用3D变化,通过将它们放置于一个三维空间,我们可以让很简单元素变得更加有活力,同时使用CSS的过渡效果,这些元素可以很容易的移动到3D空间中,并且创建一个非常真实的效果。

主要的想法是创建一个轮播式的画廊,我们可以将一个图片放置在中间,旁边放置两个图片。因为我们使用不同的角度,所以看起来两张旁边的图片好像被设置在一个3D空间中,然后我们旋转它们。

注意:这里的效果需要你的浏览器支持3D变化效果

如何工作

<section id="dg-container" class="dg-container">  
    <div class="dg-wrapper">  
        <a href="#">  
            <img src="images/1.jpg" alt="image01">  
            <div>http://www.colazionedamichy.it/</div>  
        </a>  
        <a href="#">  
            <!-- ... -->  
        </a>  
        <!-- ... -->  
    </div>  
    <nav>  
        <span class="dg-prev"><</span>  
        <span class="dg-next">></span>  
    </nav>  
</section> 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.

选项

current     : 0,  
// index of current item  
   
autoplay    : false,  
// slideshow on / off  
   
interval    : 2000  
// time between transitions 
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.

全部代码请参考在线演示.

原文:http://www.cnblogs.com/gbin1/archive/2012/02/23/2365879.html

【编辑推荐】

  1. 8款超赞的响应式jQuery幻灯片插件推荐
  2. jQuery使用方法
  3. jQuery基本原理
  4. 使用jQuery和CSS实现超酷缩略图悬浮逼近效果
  5. 10个很棒的jQuery代码片段
责任编辑:陈贻新 来源: GBin1
相关推荐

2021-06-09 08:30:52

CSS33D旋转视图3D动画

2021-01-05 08:10:00

Css前端3D旋转透视

2022-02-20 14:45:33

3D动画CSS3前端

2013-01-30 16:15:40

adobeHTML5css3

2021-06-18 05:59:37

Css前端CSS 特效

2011-06-29 13:22:58

CSS3

2017-07-11 15:00:04

前端CSS3D视角

2011-04-18 17:17:45

CSSweb开发

2013-05-31 09:36:13

Jquery3D效果

2012-05-27 18:28:46

jQuery Mobi

2010-06-09 10:50:08

OpenSUSE 3D

2012-05-24 11:03:55

HTML5

2021-04-01 06:23:24

CSS33D3D Web 动画

2015-01-19 17:44:02

Cocos引擎3D特效

2024-03-01 09:12:01

2015-12-01 09:52:03

CSS3动画源码

2023-08-04 09:56:15

2016-12-07 13:25:08

CSS33D渲染

2021-08-30 06:20:39

CSS 技巧3D 效果

2009-12-31 14:44:57

Ubuntu 3D桌
点赞
收藏

51CTO技术栈公众号