怎么用jQuery和CSS3實現的炫酷3D畫廊特效

本篇內容主要講解“怎么用jQuery和CSS3實現的炫酷3D畫廊特效”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“怎么用jQuery和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>

選項

current     : 0,  // index of current item     autoplay    : false,  // slideshow on / off     interval    : 2000  // time between transitions

全部代碼請參考在線演示.

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

到此，相信大家對“怎么用jQuery和CSS3實現的炫酷3D畫廊特效”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！