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. 當我們同時有位移和其他屬性的時候，記得要將位移放到最前面，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/553390.html
標籤：其他
下一篇：返回列表