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

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

在线演示 本地下载

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

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

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

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

如何工作

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

选项

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

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

原文: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

2011-04-18 17:17:45

CSSweb开发

2011-06-29 13:22:58

CSS3

2017-07-11 15:00:04

前端CSS3D视角

2021-06-18 05:59:37

Css前端CSS 特效

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

2023-08-04 09:56:15

2015-12-01 09:52:03

CSS3动画源码

2016-12-07 13:25:08

CSS33D渲染

2021-08-30 06:20:39

CSS 技巧3D 效果

2009-12-31 14:44:57

Ubuntu 3D桌
点赞
收藏

51CTO技术栈公众号