資訊專欄INFORMATION COLUMN
摘要：說明魔方大家應該是不會陌生的，這次我們來一起用實現一個魔方旋轉的特效，先來看看效果圖解釋我們要做這樣的效果，重點在于怎么把張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點在于用好的，這是非常重要的，好的，我們先拼出一個魔方的樣子。
說明
魔方大家應該是不會陌生的，這次我們來一起用CSS實現一個魔方旋轉的特效，先來看看效果圖！
解釋我們要做這樣的效果，重點在于怎么把6張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點在于用好CSS的transform，這是非常重要的，好的，我們先拼出一個魔方的樣子。
效果圖
代碼（代碼比較長，朋友們可以直接粘貼復制到電腦看效果）
我們來分析一下上面的代碼
先說結構部分，看圖
我們繼續說CSS部分，主要是下面這4部分，我們說說每個部分中比較重要的
1、最外層容器樣式
position: relative; ，主要是因為后面會用到position: absolute;
absolute，生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
2、包裹所有容器樣式
transform-style: preserve-3d;
使被轉換的子元素保留其 3D 轉換：
參考鏈接 http://www.runoob.com/cssref/...
3、定義所有圖片樣式
position: absolute;
讓每個面先在同一個位置，方便后面轉換位置
效果圖
Transform字面上就是變形，改變的意思。在CSS3中transform主要包括以下幾種：旋轉rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。
上下兩個面 沿X軸旋轉一定角度，沿Z軸位移一定像素。
前后左右四個面 沿Y軸旋轉一定角度，沿Z軸位移一定像素。
注意，后面是 先位移，再旋轉，其他面是先旋轉，再位移，千萬別弄錯順序。
4、鼠標移入后樣式
只是改變translateZ的值，將位移的距離再增加100px
到此，我們就弄出一個魔方了，至于最開始我們看到的魔方中還有嵌套一個小魔方，就很容易了，把這個魔方的六個面復制一下，然后粘貼到cube中，然后改變大小，和位移的距離就可以了，要讓整個魔方動起來 ，就在最外面的容器（cube）上，加上動畫就可以了。
總結做這樣的一個效果，主要是為了練習，transform，這個效果重點就是搞明白每個面要旋轉多少度，然后位移的距離是一樣的（不是說取值是一樣的），明白了之后，做這個效果就很簡單了，下方有完整的代碼！需要的朋友就CV吧！
完整示例代碼
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89477.html
摘要：說明魔方大家應該是不會陌生的，這次我們來一起用實現一個魔方旋轉的特效，先來看看效果圖解釋我們要做這樣的效果，重點在于怎么把張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點在于用好的，這是非常重要的，好的，我們先拼出一個魔方的樣子。 說明 魔方大家應該是不會陌生的，這次我們來一起用CSS實現一個魔方旋轉的特效，先來看看效果圖！ showImg(https://segment...
摘要：說明魔方大家應該是不會陌生的，這次我們來一起用實現一個魔方旋轉的特效，先來看看效果圖解釋我們要做這樣的效果，重點在于怎么把張圖片，擺放成魔方的樣子，而把它們擺放成魔方的樣子，重點在于用好的，這是非常重要的，好的，我們先拼出一個魔方的樣子。 說明 魔方大家應該是不會陌生的，這次我們來一起用CSS實現一個魔方旋轉的特效，先來看看效果圖！ showImg(https://segment...
摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處 很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...
摘要：關于的詳細講解張鑫旭一個基本的立方體就需要結合以上三點屬性來實現。寫完這篇文章后確實感覺自己對方面的知識又熟悉了不少但是前端的主力還是月份又得繼續深入學習方面的知識嘞本文參考內容關于的詳細講解張鑫旭詳解徹底理解和的區別的原始出處 很久沒有回頭來復習CSS方面的知識了, 正好又到了月底寫文章的deadline......所以這次選擇了詳細鞏固一下CSS3動畫有關的知識點,因為之前只是用過...
閱讀 958·2022-06-21 15:13
閱讀 1848·2021-10-20 13:48
閱讀 1029·2021-09-22 15:47
閱讀 1365·2019-08-30 15:55
閱讀 3112·2019-08-30 15:53
閱讀 520·2019-08-29 12:33
閱讀 712·2019-08-28 18:15
閱讀 3458·2019-08-26 13:58
