一、轉換
1.定義：改變元素在頁面的形狀、角度、大小、位置的一種效果。
2.分類：2D轉換和3D轉換。
2D轉換：
(1)位移
1-1 作用：改變元素在頁面中的位置；
1-2 語法：屬性--transform;取值如下：
1-2-1 translate(x):改變元素在X軸的位置。X取值爲正，向右移動；X取值爲負，向左移動；
1-2-2 translate(x,y):x同上。Y取值爲正，向下移動；Y取值爲負，向上移動；
1-2-3 translateX(x):只在X軸上移動；
1-2-4 translateY(y):只在Y軸上移動;
(2)縮放
2-1 作用：改變元素在頁面中的大小
2-2 語法 : 屬性--transform;取值如下：
2-2-1：scale(value) value表示橫向和縱向等比縮放值；默認值爲1，表示原始大小；>1表示放大，0~1表示縮小
2-2-2：scale(x,y)
2-2-3 : scaleX(x)
2-2-4 : scaleY(y)
(3)旋轉
3-1 作用：改變元素在頁面上的角度，要根據轉換原點實現轉換效果
3-2 語法：屬性--transform;取值如下：
3-2-1 rotate(ndeg) n表示轉換角度，n爲正，表示順時針旋轉，n爲負，表示逆時針旋轉
旋轉需要注意的地方：1.轉換原點；2.元素的座標軸也隨着一同旋轉。
先旋轉後偏移 與先偏移後旋轉 的區別
(4)傾斜
4-1 作用：改變元素在頁面中的形狀；
4-2 語法：屬性transform;取值如下：
4-2-1：skew(xdeg) 向X軸傾斜角度，相當於y軸傾斜角度。x取值爲正，y軸逆時針傾斜一定角度；x取值爲負，y軸順時針傾斜一定角度
4-2-2：skew(xdeg,ydeg) y取值爲正，x軸順時針傾斜一定角度；y取值爲負，x軸逆時針傾斜一定角度
4-2-3：skewX（xdeg）
4-2-4：skewY(ydeg)
3D 轉換：與2D相比，多了一個Z軸
屬性：perspective
作用：假定 人眼 到 投射平面的距離
注意：
該屬性要放在3D轉換元素的父元素上