使用CSS3實現3D圖片滑塊效果

　　使用 CSS3 的3D變換特性，我們可以通過讓元素在三維空間中變換來實現一些新奇的效果。 這篇文章分享的這款 jQuery 立體圖片滑塊外掛，利用了 3D transforms（變換）屬性來實現多種不同的效果。

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。

　　實現的基本思路是建立三維影像切片，作為三維物體的另一側，旋轉並顯示下一個影像。若瀏覽器不支援3D變換，一個簡單的滑塊將作為後備方案。要呼叫這個外掛，首先把圖片放在無序列表中，然後新增 CSS 類——"sb-slider" 即可，下面是 HTML 程式碼示例：

<ul id="sb-slider" class="sb-slider">

    <li>

        <a href="#" target="_blank">

            <img src="images/1.jpg" alt="image1"/>

        </a>

        <div class="sb-description">

            <h3>Creative Lifesaver</h3>

        </div>

    </li>
  

    <li>

        <img src="images/2.jpg" alt="image2"/>

        <div class="sb-description">

            <h3>...</h3>

        </div>

    </li>

    <li><!-- ... --></li>

    <!-- ... -->

</ul>

　　另外也還可以使用帶有 class 為 “sb-description” 的DIV來為圖片新增描述。如本例所示，您還可以在影像周圍新增錨點。然後呼叫外掛就可以了：

$('#sb-slider').slicebox();

　　Slicebox 配備了一組選項，你可以調整以實現不同型別的效果，各個選項和作用如下：

$.Slicebox.defaults = {

    // 方向(v)ertical, (h)orizontal or (r)andom

    orientation : 'v',

    // 元素距離檢視的距離，以畫素計

    perspective : 1200,

    // 切片，長方體的數量

    cuboidsCount : 5,

    // 是否隨機

    cuboidsRandom : false,

    // 長方體最大數量

    maxCuboidsCount : 5,

    disperseFactor : 0,

    // 隱藏滑塊的顏色

    colorHiddenSides : '#222',

    sequentialFactor : 150,

    // 動畫速度

    speed : 600,

    // 過渡效果

    easing : 'ease',

    // 自動播放

    autoplay : false,

    // 旋轉間隔

    interval: 3000,

    // 淡入淡出速度

    fallbackFadeSpeed : 300,

    // 回撥函式

    onBeforeChange : function( position ) { return false; },

    onAfterChange : function( position ) { return false; }

};

原始碼下載      線上演示