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

標籤：for   targe   ini   三維   翻轉   image   技術   嵌套   元素   

 簡介

  運用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元素的透視效果       }

 

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

最終效果

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

 

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