使用 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; }
};

 

源碼下載      在線演示

 

您可能感興趣的相關文章

• 太贊了！超炫的頁面切換動畫效果【附源碼下載】
• 創意無限！一組網頁邊欄過渡動畫【附源碼下載】
• 真是好東西！13種非常動感的頁面加載動畫效果
• 你見過嗎？9款超炫的復選框（Checkbox）效果
• 時尚設計！三種奇特網格加載效果【附源碼下載】

 

本文鏈接：jQuery & CSS3 實現 3D 圖片滑塊 via codrops

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文出處【http://www.cnblogs.com/lhb25/】