樣式 transform 屬性
描述
transform 屬性將 2D 或 3D 變換應用於元素。此屬性允許您旋轉、縮放、移動、傾斜等元素。
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
屬性 | |||||
---|---|---|---|---|---|
轉換 | 36.0 | 10.0 | 16.0 | 9.0 | 23.0 |
語法
返回 transform 屬性
物件.style.transform
設定 transform 屬性
物件.style.transform = "none|變換函式|initial|inherit"
屬性值
值 | 描述 |
---|---|
none | 定義不進行變換 |
matrix(n, n, n, n, n, n) | 使用六個值的矩陣定義 2D 變換 |
matrix3d(n, n, n, n, 等....) | 使用 16 個值的 4x4 矩陣定義 3D 變換 |
translate(x, y) | 定義 2D 平移 |
translate3d(x, y, z) | 定義 3D 平移 |
translateX(x) | 僅使用 X 軸的值定義平移 |
translateY(y) | 僅使用 Y 軸的值定義平移 |
translateZ(z) | 僅使用 Z 軸的值定義 3D 平移 |
scale(x, y) | 定義 2D 縮放變換 |
scale3d(x, y, z) | 定義 3D 縮放變換 |
scaleX(x) | 透過為 X 軸提供值來定義縮放變換 |
scaleY(y) | 透過為 Y 軸提供值來定義縮放變換 |
scaleZ(z) | 透過為 Z 軸提供值來定義 3D 縮放變換 |
rotate(角度) | 定義 2D 旋轉,角度在引數中指定 |
rotate3d(x, y, z, 角度) | 定義 3D 旋轉 |
rotateX(角度) | 定義沿 X 軸的 3D 旋轉 |
rotateY(角度) | 定義沿 Y 軸的 3D 旋轉 |
rotateZ(角度) | 定義沿 Z 軸的 3D 旋轉 |
skew(x-角度, y-角度) | 定義沿 X 軸和 Y 軸的 2D 傾斜變換 |
skewX(角度) | 定義沿 X 軸的 2D 傾斜變換 |
skewY(角度) | 定義沿 Y 軸的 2D 傾斜變換 |
perspective(n) | 為 3D 變換元素定義透視檢視 |
initial | 將此屬性設定為其預設值。閱讀關於 initial |
inherit | 從其父元素繼承此屬性。閱讀關於 inherit |
技術詳情
預設值 | none |
---|---|
返回值 | 一個字串,表示元素的 transform 屬性 |
CSS 版本 | CSS3 |
相關頁面
CSS 參考: transform 屬性