CSS transform 2D變換詳解

transform ，透過這個屬性，我們可以對元素進行移動、縮放、轉動、拉長或拉伸的變換。CSS中的變換又分為2D變換和3D變換，這裡我們來聊一下2D變換。

—— rotate() 旋轉

—— translate() 平移

—— scale() 縮放

—— skew() 翻轉（拉伸）

—— matrix() 把所有 2D 轉換方法組合在一起

現在，我們來透過具體的例子來了解這幾個屬性：

【圖比較抽象，哈哈，手殘請見諒】

前四種比較簡單，都可以透過一張圖幾行程式碼清晰簡明地展示出來，matrix()就比較傷腦筋了，它把

所有 2D 轉換方法組合在一起，比較複雜，我們來看一下：

transform: matrix（a, b, c, d, e, f);

透過matrix() 完成2D變換時需要傳6個引數，我們就可以實現上面講的4種2D變換。

matrix（cosθ, sinθ, -sinθ, cosθ, 0, 0) 等同於：rotate(θdeg)

matrix（1, 0, 0, 1, e, f) 等同於：translate(epx, fpx)

matrix（a, 0, 0, d, 0, 0) 等同於：scale(a, d)

matrix（1, tan(θy), tan(θx), 1, 0, 0) 等同於：skew(θxdeg, θydeg)

——————————手動分割線——————————
掌握前四種變換方法，基本就可以完成頁面的一些效果了，matrix() 就當作開拓眼界吧，等用到的時候再去好好研究一下。這個時候才後悔以前沒有好好學數學，越深入學技術，越發現真的會用到很多數學芝士，芝士就是力量哇～