transform：可以針對 HTML 元素做位移(translate)、旋轉(rotate)與變形(skew)。
rotate(angle)、rotateX()、rotateY()、rotateZ()
- transform:rotate(angle) 可以讓 HTML元素旋轉角度，單位為 deg。
- rotate() 必須加上 perspective() ，才會是有透視點的旋轉，不然看起來就只會是本來的形狀被壓扁了。
.rotate-x{
transform: perspective(100px) rotateX(45deg);
}
.rotate-Y{
transform: perspective(100px) rotateY(45deg);
}
.rotate-Z{
transform: perspective(100px) rotateZ(45deg);
}
translate(x, y)、translateX(x)、translateY(y)、translateZ(z)
- transform: translate(x, y)：讓HTML元素在 X軸或Y軸上做平移，單位為 px。如果只要針對X軸向右平移 50px 也可以寫成transform: translateX(50px)，而要在Y軸上向下transform: translateY(30px)。X軸與Y軸的數值可以為負值。
- 但是要注意的是，當 HTML 元素如果有被旋轉，元素的軸向也會改變，不再是所在空間的軸向，那translate()移動的距離可能會不如預期。
rotate + translate 範例
scale()、scaleX()、scaleY()、scaleZ()、scale3d()
transform: scale(x, y) 可以讓HTML元素水平與垂直縮放。x 與 y 的值為 1 的倍數。例如transform: scale(0.5, 3) ，也可以單獨縮放X軸向的寬度，例如transform: scaleX(2)。或是單獨縮放 Y軸向高度transform: scaleY(5)。
但是要注意的是，scale只是控制HTML元素的顯示比例，實際尺寸所占用的空間並不會因此有所變化。
.transformX50{
transform: scaleX(2) ;
}
.transformY100{
transform: scaleY(3);
}
.transformXY{
transform: scale(0.1,3);
}
skew()、skewX()、skewY()
skew(x,y)可以用來控制 HTML 元素的傾斜，裡面可以填入X軸與Y軸的傾斜角度，單位為deg或是rad。
例如：
transform:skew(20deg,10deg)
transition