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空間中呈現。