CSS 2D轉換
阿新 • • 發佈：2018-11-26
轉換是使元素改變形狀、尺寸和位置的一種效果。通過 CSS3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸，可以大致分為2D轉換和3D轉換。下面介紹的是2D轉換的相關知識點。
首先，CSS中2D轉換的形式是這樣的：
選擇器{ transform：轉換函式（引數，引數）； }
而2D轉換的函式一共分為五大類：
- translate() 定義位移的函式；其中後面的引數分別是相對x軸，y軸的偏移的距離，單位為畫素，形式：translate（30px,30px）;表示相對x軸，y軸偏移30畫素值，可以為負值，表示反向偏移；
- rotate() 定義旋轉的函式；定義元素順時針旋轉給定的角度，允許負值，元素將逆時針旋轉，單位為角度deg（degree），形式rotate（30deg）;元素順時針旋轉30度，負值表示逆時針選裝；
- scale()定義縮放的函式，根據給定的寬度（X 軸）和高度（Y 軸）引數，元素將進行縮放，單位為倍數，形式scale（2,2）;表示元素將會按照原尺寸在x軸，y軸分別放大2倍；可以為負數，表示旋轉；
- skew()定義翻轉的函式，根據給定的（X 軸、Y 軸）引數進行翻轉，單位為角度deg，形式為skew(30px,30px);表示元素會在x軸y軸方向偏轉30度；可以為負數，表示反向偏轉；
- matrix() 函式方法把所有 2D 轉換方法組合在一起，移動、旋轉、縮放、以及翻轉元素。注意的是：沒有定義perspective（透視效果），沒有預計的偏轉效果。
下面是所有的2D Transform方法
| 函式 | 描述 |
|---|---|
| matrix(n,n,n,n,n,n) | 定義 2D 轉換，使用六個值的矩陣。 |
| translate(x,y) | 定義 2D 轉換，沿著 X 和 Y 軸移動元素。 |
| translateX(n) | 定義 2D 轉換，沿著 X 軸移動元素。 |
| translateY(n) | 定義 2D 轉換，沿著 Y 軸移動元素。 |
| scale(x,y) | 定義 2D 縮放轉換，改變元素的寬度和高度。 |
| scaleX(n) | 定義 2D 縮放轉換，改變元素的寬度。 |
| scaleY(n) | 定義 2D 縮放轉換，改變元素的高度。 |
| rotate(angle) | 定義 2D 旋轉，在引數中規定角度。 |
| skew(x-angle,y-angle) | 定義 2D 傾斜轉換，沿著 X 和 Y 軸。 |
| skewX(angle) | 定義 2D 傾斜轉換，沿著 X 軸。 |
| skewY(angle) | 定義 2D 傾斜轉換，沿著 Y 軸。 |
Internet Explorer 10、Firefox 以及 Opera 支援 transform 屬性。
Chrome 和 Safari 需要字首 -webkit-。
註釋：Internet Explorer 9 需要字首 -ms-。