transform
- 瀏覽器支持
- 定義和用法
- translate位移函數
- rotate旋轉函數
- scale縮放函數
瀏覽器支持
表格中的數字表示支持該屬性的第一個瀏覽器版本號。
緊跟在 -webkit-, -ms- 或 -moz- 前的數字為支持該前綴屬性的第一個瀏覽器版本號。
定義和用法
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
translate位移函數
translate 的作用就是平移，參考自己原本的位置來平移。
| 值 | 描述 |
|---|---|
| translate(x,y) | 定義 2D 轉換，相當于水平平移+垂直平移 |
| translate3d(x,y,z) | 定義 3D 轉換，相當于水平平移+垂直平移+放大 |
| translateX(x) | X 軸的平移，水平方向平移 |
| translateY(y) | Y 軸的平移，垂直方向平移 |
| translateZ(z) | Z 軸的平移，相當于放大 |
1.transform: translate(100px, 200px);
實際上是水平向右平移100px，垂直向下平移200px。
2.transform: translateX(100px);
實際上是水平向右平移100px。
3.transform: translateY(200px);
實際上是垂直向下平移200px。
rotate旋轉函數
rotate的作用就是旋轉，旋轉該元素，配合著transform-origin屬性，transform-origin是設置旋轉點的。(沒有設置transform-origin 屬性也可以，只不過是根據該元素的中心點旋轉，也就是center center)。
| 值 | 描述 |
|---|---|
| rotate(angle) | 定義 2D 旋轉 |
| rotate3d(x,y,z,angle) | 定義3d旋轉 |
| rotateX(angle) | 定義沿著 X 軸的 3D 旋轉 |
| rotateY(angle) | 定義沿著 Y 軸的 3D 旋轉 |
| rotateZ(angle) | 定義沿著 Z 軸的 3D 旋轉 |
1.transform: rotate(45deg);
2.transform: rotateX(45deg);
rotateX() 方法使元素繞其 X 軸旋轉給定角度。
3.transform: rotateY(45deg);
rotateY() 方法使元素繞其 Y 軸旋轉給定角度。
4.transform: rotateZ(45deg);
rotateZ() 方法使元素繞其 Z 軸旋轉給定角度。
scale縮放函數
scale的作用就是縮放，定義倍數縮放，>1 放大， <1 縮小，默認值是 1。
| 值 | 描述 |
|---|---|
| scale(x,y) | 定義 2D 縮放轉換 |
| scale3d(x,y,z) | 定義3d旋轉轉換 |
| scaleX(x) | 通過設置 X 軸的值來定義縮放轉換 |
| scaleY(y) | 通過設置 Y 軸的值來定義縮放轉換 |
| scaleZ(z) | 通過設置 Z 軸的值來定義 3D 縮放轉換 |
1.transform: scale(0.5, 2);
水平方向縮小兩倍，垂直方向放大兩倍
)
