1.變形-參考位置
transform-origin 屬性允許改變被轉換元素的參考位置
transform-origin: x y z ; 改變旋轉參考點 給子元素自身加
例1:transform-origin:50px 50px;
例2:transform-origin:left top;
2.變形-移動 transform:translate();
2D移動:translate(x,y);
3D移動: translateX(length) 定義對象X軸的平移
translateY(length) 定義對象Y軸的平移
translateZ(length) 定義對象3D 移動Z軸的平移
translate3d(x,y,z) 定義 3D 移動
例:-webkit-transform:translate(50px,50px); 2D
-webkit-transform: translate3d(50px,50px,50px); 3D
3.變形-縮放
transform:scale(); 變形-縮放
1>transform:rotate();
2D旋轉:rotate(angle) 在參數中規定角度。
例:-webkit-transform:rotate(30deg);
3D旋轉:rotateX(angle)沿著 X 軸的 3D旋轉。
rotateY(angle)沿著 Y 軸的 3D旋轉。
rotateZ(angle)沿著 Z 軸的 3D旋轉。
rotate3d(x,y,z,angle) 定義 3D 旋轉
例1:-webkit-transform:rotate3d(1,1,1,360deg);
例2:-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);






