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軸方向的縮放
注意：即使使用scale()將元素方法縮小了，在使用getComputedStyle()獲取元素大小時值永遠都是不變的。屬性事件對象中的event.offsetX/event.offsetY也永遠是scale=1時的大小，也就是說，坐標軸會跟着縮放
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()寫在前面