2D
transform: none|transform-functions;
transform-origin: x y ;------設置變換中心。
（x，y可以是像素值、百分比或方位名詞–均是相對於自身左上角爲起點而言）
一、位移
//平移
transform: translate(x, y);
transform: translateX(n);
transform: translateY(n);
translate最大優點：不會影響其他元素的位置。
它對行內標籤沒有效果。
若值爲百分比，那麼該百分比是相對於自身的百分比。
可與定位結合實現居中定位：
position:absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
二、旋轉
transform: rotate(angle);
transform: rotateX(angle);
transform: rotateY(angle);
說明：
- 度數單位deg；例如：
- 旋轉方向：角度爲正，順時針；角度爲負，逆時針。
- 默認中心點：元素中心點。
三、縮放(scale)
transform: scale(x,y);//x,y分別爲在x，y方向上縮放的倍數
transform: scale(n);//寬高同時變爲原來的 n 倍
優點：
1、變換時不會影響其他的盒子，而且可以設置縮放的中心點。
transform綜合寫法時（如果同時含有位移和其他屬性時，把位移放在最前面）
3D
一、位移(translate)
translate3d(x,y,z) 定義 3D 轉換。
translateX(x) 定義轉換，只是用 X 軸的值。
translateY(y) 定義轉換，只是用 Y 軸的值。
translateZ(z) 定義 3D 轉換，只是用 Z 軸的值,一般用px，
二、透視(perspective)
perspective：npx; 爲3D轉換元素定義透視視圖。
透視寫在被觀察元素的父盒子上面!!!
三、3D旋轉(rotate3d)
rotate3d(x,y,z,angle) 定義 3D 旋轉。
rotateX(angle) 定義沿着 X 軸的 3D 旋轉。
rotateY(angle) 定義沿着 Y 軸的 3D 旋轉。
rotateZ(angle) 定義沿着 Z 軸的 3D 旋轉。
旋轉方向判斷：左手準則
四、3D呈現(transform-style)
- 控制子元素是否開啓三維立體環境。
- 代碼給父級，但影響的是子盒子。
transform-style: flat|preserve-3d;
// flat 表示所有子元素在2D平面呈現。
// preserve-3d 表示所有子元素在3D空間中呈現。