css3 transform轉換

1.先說說css的座標系：

x軸的正方向就是水平向右的方向
y軸的正方向就是垂直向下的方向
z軸的正方向就是屏幕到用戶的方向

2.位移

translate(x,y):2d位移
translateX(n) 設置x軸方向的位移
translateY(n) 設置y軸方向的位移

translate3d(x,y,z)：3d位移
translateZ(n) 設置z軸方向的位移

參數能夠是具體的像素值，也能夠是百分比（基於本身的寬高）

語法：

transform:translate(200px,0);

3.縮放

scale(x,y) 2d縮放，若是隻傳了一個值，則表示x,y都是這個值
scaleX(n) 設置x軸方向的縮放
scaleY(n) 設置y軸方向的縮放

scale3d(x,y,z) 3d縮放

語法：

transform:scale(2);

3.旋轉

rotate() 2d旋轉,順時針方向

rotate3d(x,y,z) 3d旋轉
rotateX(angle) 圍繞x軸旋轉
rotateY(angle) 圍繞y軸旋轉
rotateZ(angle) 圍繞z軸旋轉

語法：

transform:rotate(45deg)

要實現3d視角，須要設置

/* 3d模式 */
transform-style: preserve-3d;
/* 視距 */
perspective: 1200px;

rotateX效果

transform:   rotateX(360deg);

rotateY效果

transform:   rotateY(360deg);

rotateZ效果

transform:   rotateZ(360deg);

4.transform-origin

這個屬性用來設置元素transform時的基點，默認爲元素的中心，也就是center center
他的值有如下幾種：
具體數值 例如50px 50px
關鍵字 left right top bottom center
百分比 20% 20%（基於元素大小）

咱們前面的旋轉的例子就是基於元素中心進行旋轉的

將轉換基點修改爲左上角

transform-origin: 0 0;

5.scale與translate共用

若是scale()在前在前，則實際位移 = 設定的位移 * scale的倍數
建議translate寫在前面

transform: translate(300px,0) scale(2) ;
//以 容器的中心點來計算，容器位移了300px

transform: scale(2) translate(200px,0);
//以 容器的中心點來計算，容器位移了400px
transform: scale(3) translate(100px,0);
//以 容器的中心點來計算，容器位移了300px
transform: scale(0.5) translate(200px,0);
//以 容器的中心點來計算，容器位移了100px

6.translate()和rotate()共用

rotate()寫在translate前面的話會改變座標系，從而改變translate的設定，因此是要是設置多值的話，建議把translate()寫在前面