CSS transform 屬性

定義和用法

transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。

為了更好地理解 transform 屬性，請查看這個演示。

另請參閱：

CSS3 教程：CSS3 2D 轉換

CSS3 教程：CSS3 3D 轉換

HTML DOM 參考手冊：transform 屬性

實例

旋轉 div 元素：

div
{
transform:rotate(7deg);
}

親自試一試

頁面底部有更多實例。

CSS 語法

transform: none|transform-functions;

屬性值

值 描述 測試
none 定義不進行轉換。 測試
matrix(n,n,n,n,n,n) 定義 2D 轉換，使用六個值的矩陣。 測試
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate(x,y) 定義 2D 轉換。 測試
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。 測試
translateY(y) 定義轉換，只是用 Y 軸的值。 測試
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值。
scale(x,y) 定義 2D 縮放轉換。 測試
scale3d(x,y,z) 定義 3D 縮放轉換。
scaleX(x) 通過設置 X 軸的值來定義縮放轉換。 測試
scaleY(y) 通過設置 Y 軸的值來定義縮放轉換。 測試
scaleZ(z) 通過設置 Z 軸的值來定義 3D 縮放轉換。
rotate(angle) 定義 2D 旋轉，在參數中規定角度。 測試
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿著 X 軸的 3D 旋轉。 測試
rotateY(angle) 定義沿著 Y 軸的 3D 旋轉。 測試
rotateZ(angle) 定義沿著 Z 軸的 3D 旋轉。 測試
skew(x-angle,y-angle) 定義沿著 X 和 Y 軸的 2D 傾斜轉換。 測試
skewX(angle) 定義沿著 X 軸的 2D 傾斜轉換。 測試
skewY(angle) 定義沿著 Y 軸的 2D 傾斜轉換。 測試
perspective(n) 為 3D 轉換元素定義透視視圖。 測試

技術細節

默認值： none
繼承性： no
版本： CSS3
JavaScript 語法： object.style.transform="rotate(7deg)"

更多實例

扔到桌子上面的圖片
本例演示如何創建“寶麗來”圖片，并旋轉圖片。

瀏覽器支持

表格中的數字注明了完全支持該屬性的首個瀏覽器版本。

帶 -webkit-、-moz- 或 -ms- 的數字表示使用前綴的首個版本。

屬性 Chrome IE / Edge Firefox Safari Opera
transform (2D) 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform (3D) 36.0
12.0 -webkit-		 12.0 10.0 9.0
4.0 -webkit-		 23.0
15.0 -webkit-