如何利用CSS3實現(xiàn)3D變換、立方體旋轉(zhuǎn)效果，本文為大家分享實現(xiàn)思路，供大家參考，具體內(nèi)容如下

3D變換基于幾個比較重要的屬性，perspective,translateZ,preserve-3d;
transform-style(preserve-3d)建立3D空間
perspective視鏡
perspective-origin視鏡基點
x:left/center/right/length/%
y:top/center/bottom/length/%
transform新增函數(shù)
rotateX():如果值為正值，元素圍繞X軸順時針旋轉(zhuǎn)；反之，如果值為負值，元素圍繞X軸逆時針旋轉(zhuǎn)。
rotateY():如果值為正值，元素圍繞Y軸順時針旋轉(zhuǎn)；反之，如果值為負值，元素圍繞Y軸逆時針旋轉(zhuǎn)。
rotateZ():rotateZ()函數(shù)指定元素圍繞Z軸旋轉(zhuǎn)，如果僅從視覺角度上看，rotateZ()函數(shù)讓元素順時針或逆時針旋轉(zhuǎn)，并且效果和rotate()效果等同，
translateZ();讓元素在Z軸進行位移，當其值越大時，元素離觀看者越近，視覺上元素放大，反之元素縮小。
scaleZ(),scaleZ()在單獨使用時，沒有任何效果，需要配合其它的變形函數(shù)一起使用才會有效果。
transform-orign:旋轉(zhuǎn)的基準點
x:left/center/right/length/%
y:top/center/bottom/length//%
z:length

**3D位移：**CSS3中的3D位移主要包括translateZ()和translate3d()兩個功能函數(shù)；
**3D旋轉(zhuǎn)：**CSS3中的3D旋轉(zhuǎn)主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四個功能函數(shù)；
**3D縮放：**CSS3中的3D縮放主要包括scaleZ()和scale3d()兩個功能函數(shù)；
**3D矩陣：**CSS3中3D變形中和2D變形一樣也有一個3D矩陣功能函數(shù)matrix3d()

格式：
舞臺(perspective)
容器(3D, preserve-3d)
內(nèi)容

3D實現(xiàn)立方體盒子：

第一步：先布局好div的位置。

第二步：對每個平面旋轉(zhuǎn)。旋轉(zhuǎn)之前的準備工作：
給舞臺加上視鏡,perspective(設(shè)為800px到1200px之間)
給容器加上3D效果;transform-style:preserve-3d;
上面和下面繞著X軸旋轉(zhuǎn)。左面和右面繞著Y軸旋轉(zhuǎn)，前面在Z軸上移動。旋轉(zhuǎn)時，要設(shè)置旋轉(zhuǎn)的基準點，上面以下邊為旋轉(zhuǎn)基準，旋轉(zhuǎn)90deg,下面以上邊為旋轉(zhuǎn)基點，旋轉(zhuǎn)90deg,左面以右邊為旋轉(zhuǎn)基點，旋轉(zhuǎn)90deg,右邊以左邊作為旋轉(zhuǎn)基點，旋轉(zhuǎn)90deg.然后將前面沿著Z軸方向平移。
如果將視鏡加給容器，在容器旋轉(zhuǎn)時，就可以看到異常，如果不給容器加上transform-style:preserve-3d;那么旋轉(zhuǎn)時，就只看到平面在旋轉(zhuǎn)

第三步：實現(xiàn)3D立方體的旋轉(zhuǎn)

給容器設(shè)置旋轉(zhuǎn)中心,我設(shè)置的是盒子的正中心進行旋轉(zhuǎn)。這樣一個3D立方體的旋轉(zhuǎn)效果就完成了。

為了更好的展示，我們可以將每個面換成是一張圖片。

但是這個在旋轉(zhuǎn)時，有一個問題，不該看到的平面也會被看到：

相反，如果通過另一種方式來實現(xiàn)，則不會有這個問題。不修改容器的旋轉(zhuǎn)中心，通過將后面，上下左右面沿著Z軸向后平移寬度的一般，然后再將前面向前移動寬度的一般，那么旋轉(zhuǎn)中心就是盒子的中心。
如下：

在旋轉(zhuǎn)過程中，一切正常：

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助。

原文地址：http://blog.csdn.net/liuyan19891230/article/details/51233866

最新評論