Style transform 屬性

定義和用法

transform 屬性將 2D 或 3D 轉換應用于元素。此屬性允許您對元素進行旋轉、縮放、移動、傾斜等。

另請參閱：

CSS 參考手冊：transform 屬性

實例

旋轉 div 元素：

document.getElementById("myDIV").style.transform = "rotate(7deg)";

親自試一試

語法

返回 transform 屬性：

object.style.transform

設置 transform 屬性：

object.style.transform = "none|transform-functions|initial|inherit"

屬性值

值 描述
none 定義不應有轉換。
matrix(n, n, n, n, n, n) 使用六個值的矩陣定義二維轉換。
matrix3d(n, n, n, n, etc....) 使用 16 個值的 4x4 矩陣定義 3D 轉換。
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 轉換元素的透視圖。
initial 將此屬性設置為其默認值。請參閱 initial。
inherit 從其父元素繼承此屬性。請參閱 inherit。

技術細節

默認值： 無
返回值： 字符串，表示元素的 transform 屬性。
CSS 版本： CSS3

瀏覽器支持

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

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
36.0 10.0 16.0 9.0 23.0