在線演示 本地下載

今天我們分享一款使用jQuery和CSS3實(shí)現(xiàn)的3D環(huán)廊展示特效，這個(gè)3D特效使用CSS3的3D變化特性實(shí)現(xiàn)，簡(jiǎn)單而非常華麗，希望大家喜歡!

使用3D變化，通過(guò)將它們放置于一個(gè)三維空間，我們可以讓很簡(jiǎn)單元素變得更加有活力，同時(shí)使用CSS的過(guò)渡效果，這些元素可以很容易的移動(dòng)到3D空間中，并且創(chuàng)建一個(gè)非常真實(shí)的效果。

主要的想法是創(chuàng)建一個(gè)輪播式的畫廊，我們可以將一個(gè)圖片放置在中間，旁邊放置兩個(gè)圖片。因?yàn)槲覀兪褂貌煌慕嵌龋钥雌饋?lái)兩張旁邊的圖片好像被設(shè)置在一個(gè)3D空間中，然后我們旋轉(zhuǎn)它們。

注意：這里的效果需要你的瀏覽器支持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> 

選項(xiàng)

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

全部代碼請(qǐng)參考在線演示.

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

【編輯推薦】

1. 8款超贊的響應(yīng)式j(luò)Query幻燈片插件推薦
2. jQuery使用方法
3. jQuery基本原理
4. 使用jQuery和CSS實(shí)現(xiàn)超酷縮略圖懸浮逼近效果
5. 10個(gè)很棒的jQuery代碼片段