css3實現酷炫的3D盒子翻轉效果

 簡介

  運用css3先在平面空間組成立方體盒子，再讓整個盒子翻轉起來，先來張效果圖：

   

 步驟

1.先用css將6張圖片擺成下圖的樣子：

下面就是通過css3的3D變換將每個面進行翻轉，使之成為一個立體的盒子，代碼如下：

//左面
.pic2{
    transform:rotateY(90deg);  //沿y軸翻轉90度
    transform-origin:right;   //以右邊為軸
}

//前面
.pic6{
    transform:translateZ(100%);  //垂直屏幕向外移動立方體的長度
}

 

其他幾個面按照同樣的方式進行翻轉就行

2.為整個立方體添加動畫

三維的盒子完成后，只要為整個盒子添加動畫，三維盒子就會跟着一起翻轉達到了翻轉的效果：

//自定義動畫樣式
@keyframes mySec{                                                     
    0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}   //按自己的要求添加樣式，分割動畫幀數
    50%{transform:rotateX(230deg) rotateY(-20deg) rotateZ(-90deg);}
    100%{transform:rotateX(-360deg) rotateY(360deg) rotateZ(-360deg);}
}

//為容器添加樣式
.myDiv{
    animation:mySec 7s infinite;  //調用動畫
    transform-style:preserve-3d;  //指定容器嵌套元素三維呈現效果
    perspective:1000px;           //規定3D元素的透視效果       
}

 

還可以為單個面應用動畫，步驟同上，只要計算好動畫持續及延遲時間就能達到酷炫的效果！

最終效果[不支持ie，請用chrome觀看]

若有不足之處，歡迎小伙伴指正！