CSS3中transform屬性詳解

兼容性

• Internet Explorer 10、Firefox、Opera 支持 transform 屬性。 Internet Explorer 10、Firefox、Opera 支持 transform 屬性。
• Internet Explorer 9 支持替代的 -ms-transform 屬性（僅適用於 2D 轉換）。
• Safari 和 Chrome 支持替代的 -webkit-transform 屬性（3D 和 2D 轉換）。
  由此可見沒特殊要求兼容性還是可以的。

translate：平移

• 單位： px

transform: translate(50px, 50px); // 實例

• 語法：

(1) translate(x, y) // 普通用法
(2) translateX(x) // 定義轉換，只是用 X 軸的值
(3) translateY(y) // 定義轉換，只是用 Y 軸的值
(4) translateZ(z) // 定義 3D 轉換，只是用 Z 軸的值
(5) translate3d(x,y,z) // 定義 3D 轉換

• 方向：

   以筆記本打開90°爲參考座標系：
   X軸正方向：屏幕從左向右
   Y軸正方向：屏幕從上向下
   Z軸正方向：垂直屏幕從外
  

x： 正值------------X軸正方向
y： 正值------------y軸正方向
z： 正值------------z軸正方向

rotate：旋轉

• 單位： deg

transform: rotate(90deg); // 實例

• 語法：

(1) rotate(angle) // 定義 2D 旋轉，在參數中規定角度
(2) rotate3d(x,y,z,angle) // 定義 3D 旋轉 **需要配合 transform-style:preserve-3d;
(3) rotateX(angle) // 定義沿着 X 軸的 3D 旋轉
(4) rotateY(angle) // 定義沿着 Y 軸的 3D 旋轉
(5) rotateZ(angle) // 定義沿着 Z 軸的 3D 旋轉

• 方向：

   以筆記本打開90°爲參考座標系：
   X軸正方向：屏幕從左向右
   Y軸正方向：屏幕從上向下
   Z軸正方向：垂直屏幕從外
  

x： 正值------------X軸正方向
y： 正值------------y軸正方向
z： 正值------------z軸正方向

scale：縮放

• 單位： 數字

transform: scale(1.2, 1.2); // 實例

• 語法：

(1) scale(x, y) // 定義 2D 縮放轉換
(2) scale3d(x, y, z) // 定義 3D 縮放轉換 // 定義 3D 旋轉 **需要配合 transform-style:preserve-3d;
(3) scaleX(x) // 通過設置 X 軸的值來定義縮放轉換
(4) scaleY(y) // 通過設置 Y 軸的值來定義縮放轉換
(5) scaleZ(z) // 通過攝這是 Z 軸的值來定義 3D 縮放轉換

• 方向：

   以筆記本打開90°爲參考座標系：
   X軸正方向：屏幕從左向右
   Y軸正方向：屏幕從上向下
   Z軸正方向：垂直屏幕從外
  

x： 正值------------X軸正方向
y： 正值------------y軸正方向
z： 正值------------z軸正方向

注意：perspective(n): 爲 3D 轉換元素定義透視視圖。