【全網最全的博客美化系列教程】19.旋轉立方體的實現

全網最全的博客美化系列教程相關文章目錄

【全網最全的博客美化系列教程】01.添加Github項目鏈接

【全網最全的博客美化系列教程】02.添加QQ交談鏈接

【全網最全的博客美化系列教程】03.給博客添加一只萌萌噠的小倉鼠

【全網最全的博客美化系列教程】04.訪客量統計的實現

【全網最全的博客美化系列教程】05.公告欄個性時間顯示的實現

【全網最全的博客美化系列教程】06.推薦和反對炫酷樣式的實現

【全網最全的博客美化系列教程】07.添加一個分享的按鈕吧

【全網最全的博客美化系列教程】08.自定義地址欄Logo

【全網最全的博客美化系列教程】09.添加"擴大/縮小瀏覽區域大小" 按鈕

【全網最全的博客美化系列教程】10.小火箭置頂特效的實現

【全網最全的博客美化系列教程】11.鼠標點擊愛心特效的實現

【全網最全的博客美化系列教程】12.修改鼠標圖案

【全網最全的博客美化系列教程】13.鼠標點擊效果升級的實現

【全網最全的博客美化系列教程】14.代碼高亮設置的實現

【全網最全的博客美化系列教程】15.動畫幻燈效果的實現

【全網最全的博客美化系列教程】16.給博客添加一個打賞的實現

【全網最全的博客美化系列教程】17.博客背景刷新切換效果的實現

【全網最全的博客美化系列教程】18.數學之美---動態幾何線條的實現

【全網最全的博客美化系列教程】19.旋轉立方體的實現

【全網最全的博客美化系列教程】20.給博客添加一個萌萌噠的看板娘

【全網最全的博客美化系列教程】21.給博客添加一個夜間模式吧

【全網最全的博客美化系列教程】22.添加一個文章目錄特效

【全網最全的博客美化系列教程】23.圖片水紋特效的實現

【全網最全的博客美化系列教程】24.給博客增加一個音樂播放器特效

【全網最全的博客美化系列教程】25.給博客增加一個音樂播放器特效

【全網最全的博客美化系列教程】26.評論頭像旋轉的實現

【全網最全的博客美化系列教程】27.IP地址定位及天氣預報的實現

【全網最全的博客美化系列教程】28.3D標簽雲動畫的實現

【全網最全的博客美化系列教程】29.自制HTML源碼運行Javascript特效

【全網最全的博客美化系列教程】30.博客文章實現markdown書寫機制

【全網最全的博客美化系列教程】31.用Canvas和requestAnimFrame做動畫特效

【全網最全的博客美化系列教程】32.公告欄添加自己的頭像

【全網最全的博客美化系列教程】33.添加一只舞動的小知音

【全網最全的博客美化系列教程】34.皮膚背景的選擇與定制

實現過程

效果呈現如下：

很多人很好奇這個旋轉立方體是怎么實現的，今天我們就來帶大家一步步去實現我們的旋轉立方體。

我們可以通過 CSS 動畫實現的立方體旋轉，可以改變 CSS 代碼中關鍵幀定義（@keyframes）來改變立方體的旋轉方式。

我們可能會用到的標簽屬性如下：

標簽	描述
transform	元素可以2D或3D轉換
transform-style	規定元素如何在 3D 空間中顯示。
animation	可以給元素設置動畫
@keyframes 動畫名 {from {}to {}}	設置動畫從開始到結束的
translateX(x)	定義 3D 轉化，僅使用用於 X 軸的值。
translateY(y)	定義 3D 轉化，僅使用用於 Y 軸的值。
translateZ(z)	定義 3D 轉化，僅使用用於 Z 軸的值。
translate3d(x,y,z)	定義 3D 轉化。
scaleX(x)	定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y)	定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z)	定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotateX(angle)	定義沿 X 軸的 3D 旋轉。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉。
rotate3d(x,y,z,angle)	定義 3D 旋轉。

此時我們有如下的實現思路：

1、先把正方體的六個面放在一起；

2、然后旋轉各個面，讓它形成一個立方體；

3、然后讓它旋轉。

第一步，我們先給把正方體的六個面給定義一下：

/*最外層容器樣式*/
.wrap {
   width: 100px;
   height: 100px;
   margin: 150px;
   position: relative;
}
/*包裹所有容器樣式*/
/*設置transform-style: preserve-3d，讓其子元素在3D空間呈現*/
.cube {
   width: 50px;
   height: 50px;
   margin: 0 auto;
   transform-style: preserve-3d;
   transform: rotateX(-30deg) rotateY(-80deg);
   animation: rotate linear 20s infinite;
}
@-webkit-keyframes rotate {
   from {
       transform: rotateX(0deg) rotateY(0deg);
  }
   to {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.cube div {
   position: absolute;
   width: 200px;
   height: 200px;
   opacity: 0.8;
   transition: all .4s;
}
/*定義所有圖片樣式*/
.pic {
   width: 200px;
   height: 200px;
}
/*定義小正方體樣式*/
.cube span {
   display: block;
   width: 100px;
   height: 100px;
   position: absolute;
   top: 50px;
   left: 50px;
}
.cube .in_pic {
   width: 100px;
   height: 100px;
}

第二步，旋轉各個面，讓它形成一個立方體。那該怎么旋轉呢？

在這里，我們把它分為三個部分。

1、translateZ：平移兩個面形成正方體前后兩個面

2、rotateX(90deg)：反轉兩個面形成正方體左右兩個面

3、rotateY(90deg)：反轉兩個面形成正方體上下兩個面

實現過程如下：

/*定義大正方體六個面旋轉樣式*/
.cube .out_front {
   transform: rotateY(0deg) translateZ(100px);
}

.cube .out_back {
   transform: translateZ(-100px) rotateY(180deg);
}

.cube .out_left {
   transform: rotateY(-90deg) translateZ(100px);
}

.cube .out_right {
   transform: rotateY(90deg) translateZ(100px);
}

.cube .out_top {
   transform: rotateX(90deg) translateZ(100px);
}

.cube .out_bottom {
   transform: rotateX(-90deg) translateZ(100px);
}
​
/*定義小正方體六個面旋轉樣式*/
.cube .in_front {
   transform: rotateY(0deg) translateZ(50px);
}

.cube .in_back {
   transform: translateZ(-50px) rotateY(180deg);
}

.cube .in_left {
   transform: rotateY(-90deg) translateZ(50px);
}

.cube .in_right {
   transform: rotateY(90deg) translateZ(50px);
}

.cube .in_top {
   transform: rotateX(90deg) translateZ(50px);
}

.cube .in_bottom {
   transform: rotateX(-90deg) translateZ(50px);
}

/*鼠標移入后樣式*/
.cube:hover .out_front {
   transform: rotateY(0deg) translateZ(200px);
}

.cube:hover .out_back {
   transform: translateZ(-200px) rotateY(180deg);
}

.cube:hover .out_left {
   transform: rotateY(-90deg) translateZ(200px);
}

.cube:hover .out_right {
   transform: rotateY(90deg) translateZ(200px);
}

.cube:hover .out_top {
   transform: rotateX(90deg) translateZ(200px);
}

.cube:hover .out_bottom {
   transform: rotateX(-90deg) translateZ(200px);
}

第三步，讓它旋轉起來。

通過旋轉div，我們即可實現旋轉功能。

最終完整實現代碼如下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <style>
       /*最外層容器樣式*/
       .wrap {
           width: 100px;
           height: 100px;
           margin: 150px;
           position: relative;
      }

       /*包裹所有容器樣式*/
       /*設置transform-style: preserve-3d，讓其子元素在3D空間呈現*/
       .cube {
           width: 50px;
           height: 50px;
           margin: 0 auto;
           transform-style: preserve-3d;
           transform: rotateX(-30deg) rotateY(-80deg);
           animation: rotate linear 20s infinite;
      }

       @-webkit-keyframes rotate {
           from {
               transform: rotateX(0deg) rotateY(0deg);
          }
           to {
               transform: rotateX(360deg) rotateY(360deg);
          }
      }

       .cube div {
           position: absolute;
           width: 200px;
           height: 200px;
           opacity: 0.8;
           transition: all .4s;
      }

       /*定義所有圖片樣式*/
       .pic {
           width: 200px;
           height: 200px;
      }

       .cube .out_front {
           transform: rotateY(0deg) translateZ(100px);
      }

       .cube .out_back {
           transform: translateZ(-100px) rotateY(180deg);
      }

       .cube .out_left {
           transform: rotateY(-90deg) translateZ(100px);
      }

       .cube .out_right {
           transform: rotateY(90deg) translateZ(100px);
      }

       .cube .out_top {
           transform: rotateX(90deg) translateZ(100px);
      }

       .cube .out_bottom {
           transform: rotateX(-90deg) translateZ(100px);
      }

       /*定義小正方體樣式*/
       .cube span {
           display: block;
           width: 100px;
           height: 100px;
           position: absolute;
           top: 50px;
           left: 50px;
      }

       .cube .in_pic {
           width: 100px;
           height: 100px;
      }

       .cube .in_front {
           transform: rotateY(0deg) translateZ(50px);
      }

       .cube .in_back {
           transform: translateZ(-50px) rotateY(180deg);
      }

       .cube .in_left {
           transform: rotateY(-90deg) translateZ(50px);
      }

       .cube .in_right {
           transform: rotateY(90deg) translateZ(50px);
      }

       .cube .in_top {
           transform: rotateX(90deg) translateZ(50px);
      }

       .cube .in_bottom {
           transform: rotateX(-90deg) translateZ(50px);
      }

       /*鼠標移入后樣式*/
       .cube:hover .out_front {
           transform: rotateY(0deg) translateZ(200px);
      }

       .cube:hover .out_back {
           transform: translateZ(-200px) rotateY(180deg);
      }

       .cube:hover .out_left {
           transform: rotateY(-90deg) translateZ(200px);
      }

       .cube:hover .out_right {
           transform: rotateY(90deg) translateZ(200px);
      }

       .cube:hover .out_top {
           transform: rotateX(90deg) translateZ(200px);
      }

       .cube:hover .out_bottom {
           transform: rotateX(-90deg) translateZ(200px);
      }
   </style>
</head>
<body>
   <!-- 外層最大容器 -->
   <div class="wrap">
       <!--包裹所有元素的容器-->
       <div class="cube">
           <!--前面圖片 -->
           <div class="out_front">
               <img src="https://i.loli.net/2018/05/03/5aeb0eef73838.jpg" class="pic" />
           </div>
           <!--后面圖片 -->
           <div class="out_back">
               <img src="https://i.loli.net/2018/05/03/5aeb0f2fb9a83.jpg" class="pic" />
           </div>
           <!--左面圖片 -->
           <div class="out_left">
               <img src="https://i.loli.net/2018/05/03/5aeb0f55411f0.jpg" class="pic" />
           </div>
           <!--右面圖片 -->
           <div class="out_right">
               <img src="https://i.loli.net/2018/05/03/5aeb0f79a1124.jpg" class="pic" />
           </div>
           <!--上面圖片 -->
           <div class="out_top">
               <img src="https://i.loli.net/2018/05/03/5aeb0f98a8b66.jpg" class="pic" />
           </div>
           <!--下面圖片 -->
           <div class="out_bottom">
               <img src="https://i.loli.net/2018/05/03/5aeb0fdd51b7e.jpg" class="pic" />
           </div>

           <!--小正方體 -->
           <span class="in_front">
               <img src="https://i.loli.net/2018/05/03/5aeb100223dd0.jpg" class="in_pic" />
           </span>
           <span class="in_back">
                <img src="https://i.loli.net/2018/05/03/5aeb101c2c24b.jpg" class="in_pic" />
           </span>
           <span class="in_left">
               <img src="https://i.loli.net/2018/05/03/5aeb1038127b5.jpg" class="in_pic" />
           </span>
           <span class="in_right">
               <img src="https://i.loli.net/2018/05/03/5aeb0dce1ca55.jpg" class="in_pic" />
           </span>
           <span class="in_top">
               <img src="https://i.loli.net/2018/05/03/5aeb1057bb167.jpg" class="in_pic" />
           </span>
           <span class="in_bottom">
               <img src="https://i.loli.net/2018/05/03/5aeb107514579.jpg" class="in_pic" />
           </span>
       </div>
   </div>
</body>
</html>

添加方式：進入自己的博客園->設置，將以上html代碼添加到“博客側邊欄公告”即可。