CSS transform 屬性
示例
旋轉、傾斜和縮放三個不同的 <div> 元素
div.a {
transform: rotate(20deg);
}
div.b {
transform: skewY(20deg);
}
div.c {
transform: scaleY(1.5);
}
自己動手試一試 »
定義和用法
transform 屬性為一個元素應用 2D 或 3D 轉換。此屬性允許您旋轉、縮放、移動、傾斜等元素。
| 預設值 | none |
|---|---|
| 繼承 | no |
| 可動畫 | 是。 閱讀有關可動畫屬性的內容 試一試 |
| 版本 | CSS3 |
| JavaScript 語法 | object.style.transform="rotate(7deg)" 試一試 |
瀏覽器支援
表中的數字指定了完全支援該屬性的第一個瀏覽器版本。
| 屬性 | |||||
|---|---|---|---|---|---|
| 轉換 | 36 | 12 | 16 | 9 | 23 |
語法
transform: none|transform-functions|initial|inherit;
屬性值
| 值 | 描述 | 演示 |
|---|---|---|
| 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) |
使用 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,angle) | 定義 3D 旋轉 | |
| rotateX(角度) | 定義沿 X 軸的 3D 旋轉 | 演示 ❯ |
| rotateY(角度) | 定義沿 Y 軸的 3D 旋轉 | 演示 ❯ |
| rotateZ(角度) | 定義沿 Z 軸的 3D 旋轉 | |
| skew(x-angle,y-angle) | 定義沿 X 軸和 Y 軸的 2D 傾斜變換 | 演示 ❯ |
| skewX(角度) | 定義沿 X 軸的 2D 傾斜變換 | 演示 ❯ |
| skewY(角度) | 定義沿 Y 軸的 2D 傾斜變換 | 演示 ❯ |
| perspective(n) | 為 3D 變換元素定義透視檢視 | |
| initial | 將此屬性設定為其預設值。閱讀關於initial | |
| inherit | 從其父元素繼承此屬性。閱讀關於inherit |
更多示例
圖片扔在桌子上
此示例演示瞭如何建立“即時成像”圖片並旋轉圖片。
相關頁面
CSS 教程： CSS 2D 變換
CSS 教程： CSS 3D 變換
HTML DOM 參考： transform 屬性
