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

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

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

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

3D實現立方體盒子：

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

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

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表