1.轉換 轉換（transform）是CSS3中具有顛覆性的特征之一，可以實現元素的位移、旋轉、縮放等效果。 轉換（transform）可以簡單理解為變形。 移動：translate 旋轉：rotate 縮放：scale 1.1 二維坐標系 2D轉換是改變在二維平面上的位置和形狀的一種技術。 1.2 ...
1.轉換
轉換（transform）是CSS3中具有顛覆性的特征之一，可以實現元素的位移、旋轉、縮放等效果。
轉換（transform）可以簡單理解為變形。
移動：translate
旋轉：rotate
縮放：scale
1.1 二維坐標系
2D轉換是改變在二維平面上的位置和形狀的一種技術。
1.2 2D 轉換之移動 translate
2D移動是2D轉換裡面的一種功能，可以改變元素在頁面中的位置，類似定位。
語法
|
transform: translate(x,y);或者分開寫 |
|
transform: translateX(n); |
|
transform: translateY(n); |
重點
（1）定義2D轉換中的移動，沿著X和Y軸移動元素。
（2）translate最大的優點：不會影響到其他元素的位置。
（3）translate中的百分比單位是相對於自身元素的translate: (50%,50%);
（4）對行內標簽沒有效果。
1.3 2D轉換之旋轉 rotate
2D轉換指的是讓元素在二維平面內順時針旋轉或者逆時針旋轉。
語法
| transform: rotate(度數) |
重點
（1）rotate裡面跟度數，單位是deg。
（2）角度為正時，順時針，負時，為逆時針。
（3）預設旋轉的中心點是元素的中心點。
1.4 2D轉換中心點 transform-origin
設置轉換點為中心點。
語法
| transform-origin: x y; |
重點
（1）註意後面的參數x和y用空格隔開。
（2）x y預設轉換的中心點是元素的中心點(50% 50%)。
（3）還可以給x y設置像素或者方位名詞(top bottom left right center)。
1.5 2D轉換之縮放scale
縮放，顧名思義，可以放大和縮小。只要給元素添加上了這個屬性就能控制它放大還是縮小。
語法
| transform: scale(x,y); |
註意
（1）註意其中的x和y用逗號分隔。
（2）transform: scale(1,1)：寬和高都放大一倍，相對於沒有放大。
（3）transform: scale(2,2)：寬和高都放大兩倍。
（4）transform: scale(2)：只寫一個參數，第二個參數則和第一個參數一樣，相當於scale(2,2)。
（5）transform: scale(0.5,0.5)：縮小。
（6）scale縮放最大的優勢：可以設置轉換中心點縮放，預設以中心點縮放的，則不影響其他盒子。
1.6 2D轉換綜合寫法
註意：
1. 同時使用多個轉換，其格式為：transform: translate()rotate()scale()…等。
2. 其順序會影響轉換效果。（先選轉會改變坐標軸方向）。
3. 當我們同時有位移和其他屬性的時候，記得要將位移放到最前面。
