樣式 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 屬性
