Css3 3D Style Example

2016年05月12日 / 網頁設計 / 3D , CSS3 , 網頁

前言

昨天花了一天把 3D 屬性的使用方法及觀念給弄個大概，後悔以前沒有學好線性代數、立體公式、角度等等..找時間要翻出來在算一算了。現今比較新的瀏覽器雖然支援這些屬性，但是每種瀏覽器看的效果又有一些不同，這絕對是被客戶給否定的。更別說還有很多骨董電腦的存在了!

以下是使用了 translate3d(位移)、rolate3d(旋轉)、scale3d(縮放)的屬性及其單一屬性X、Y、Z，滑鼠移過去可以看到原始位置

1.translateX(20px)

2.translateY(20px)

3.translateZ(20px)

4.translate3d(20px,20px,20px)

5.rotateX(20px)

6.rotateY(20px)

7.rotateZ(20px)

8.rolate3d(1,1,1,45deg)

9.scaleX(1.2)

10.scaleY(1.2)

11.scaleZ(1.2)

12.scale3d(1.2,1.2,1.2)

如果運用了兩種不同的屬性呢?效果會變成如何呢?以下幾個 Box 在第一個屬性作用後再追加旋轉 90deg

1.translateX(20px) rolate3d(20px,20px,20px,90deg)

2.translateY(20px) rolate3d(20px,20px,20px,90deg)

3.translateZ(20px) rolate3d(20px,20px,20px,90deg)

4.translate3d(20px,20px,20px) rolate3d(20px,20px,20px,90deg)

5.scaleX(1.2) rolate3d(20px,20px,20px,90deg)

6.scaleY(1.2) rolate3d(20px,20px,20px,90deg)

7.scaleZ(1.2) rolate3d(20px,20px,20px,90deg)

8.scale3d(1.2,1.2,1.2) rolate3d(20px,20px,20px,90deg)