3.29 效果 - 轉換 transform
transform 2D 轉換效果共有四種，分別是：
rotate：旋轉
scale：縮放
translate：偏移
skew：傾斜
rotate 旋轉
一個元素設定旋轉，單位 deg(度數)，然後原點是以元素的中心點來旋轉。度數是正的，就以順時針方向；反之則為逆時針方向。
可以透過 transform-origin，來改變旋轉的原點位置，例如以左上角。
元素旋轉後，並不會影響到周圍的元素。
語法：
transform: rotate(20deg); /* 順時針轉 20 度 */
transform-origin: 50% 50%; /* 這是預設值，元素的中心點 */範例：
scale 縮放
語法：
一個元素設定縮放，預設是 1。可設定大於等於 0 的小數、整數。
可以透過 transform-origin，來改變縮放的原點，例如以左上角。
元素縮放後，並不會影響到周圍的元素。
也可以只針對單一方向來縮放：
範例：
translate 偏移
設定相對於自己原來的位置，設定要如何水平方向、垂直方向的偏移。
語法：第一個參數是水平方向(x 軸)的偏移，第二個參數是垂直方向(y 軸)的偏移：
如果是只想設定其中一個方向就好，可以使用以下語法(translateX、translateY )：
元素的偏移，並不會影響到周圍的元素。
範例：
skew 傾斜
語法：第一個參數是針對 x 軸方向傾斜，第二個是 y 軸方向傾斜
假設 skew(20deg, 0deg)：
假設 skew(0deg, 20deg)：
範例：
例：導覽列傾斜
同時套用多種 transform 效果
不能寫多個 transform，而是寫在同一個 transform，且用空格做分隔。
語法：
Last updated