簡單說用CSS做乙個魔方旋轉的效果

魔方大家應該是不會陌生的，這次我們來一起用css實現乙個魔方旋轉的特效，先來看看效果圖！

我們要做這樣的效果，重點在於怎麼把6張，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點在於用好css的transform，這是非常重要的，好的，我們先拼出乙個魔方的樣子。

效果圖

**（**比較長，朋友們可以直接貼上複製到電腦看效果）

我們來分析一下上面的**

先說結構部分，看圖

我們繼續說css部分，主要是下面這4部分，我們說說每個部分中比較重要的

1、最外層容器樣式

position: relative;，主要是因為後面會用到position: absolute;

absolute，生成絕對定位的元素，相對於 static 定位以外的第乙個父元素進行定位。

2、包裹所有容器樣式

transform-style: preserve-3d;

使被轉換的子元素保留其 3d 轉換：

參考鏈結

3、定義所有樣式

position: absolute;

讓每個麵先在同乙個位置，方便後面轉換位置

效果圖

transform字面上就是變形，改變的意思。在css3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

上下兩個面沿x軸旋轉一定角度，沿z軸位移一定畫素。

前後左右四個面沿y軸旋轉一定角度，沿z軸位移一定畫素。

注意，後面是先位移，再旋轉，其他面是先旋轉，再位移，千萬別弄錯順序。

4、滑鼠移入後樣式

只是改變translatez的值，將位移的距離再增加100px

到此，我們就弄出乙個魔方了，至於最開始我們看到的魔方中還有巢狀乙個小魔方，就很容易了，把這個魔方的六個面複製一下，然後貼上到cube中，然後改變大小，和位移的距離就可以了，要讓整個魔方動起來，就在最外面的容器（cube）上，加上動畫就可以了。

做這樣的乙個效果，主要是為了練習，transform，這個效果重點就是搞明白每個面要旋轉多少度，然後位移的距離是一樣的（不是說取值是一樣的），明白了之後，做這個效果就很簡單了，下方有完整的**！需要的朋友就cv吧！

簡單說 用CSS做乙個魔方旋轉的效果