現在我們會使用基本的偽類選擇器做效果了,但看到變化過程一閃而過、冷冰冰的,想增添更多漸變效果,讓動態效果可以更多變化、更平滑動感,就要使用我們的 transform 與 transition 這兩個屬性。
transform 屬性是依靠 GPU 控制,修改 CSS 視覺模型的空間維度。
大多數的屬性值預設都是操控平面維度的 X 軸 與 Y 軸,如果要再加上第三維度 Z 軸,需要額外添加。
使用方法為transform: 想進行控制的屬性值方法
,有多個屬性值可以用空白鍵或換行做區隔。
以下的動態圖,只是要區分元素與原本的差異,並不會有動態效果
你會發現跟 Position 定位元素很相似,同樣都是移動元素,但他們不同的地方是,% 數參考的對象 與 GPU 的參與。注意 適當使用 GPU 可以減輕渲染負擔,過度使用 GPU 容易消耗過多記憶體。
使用方法transform: translate( X 軸, Y 軸 )
,當只有使用一個值,該值代表 X 軸,如果想使用 Z 軸,就要改用translate3d(X 軸, Y 軸, Z 軸 )
或 translateZ( Z 軸 )
。
使用的值需要單位(px, %, em...),% 數是依照自身長寬當作參考,Z 軸只能使用長度單位(px, em...),因為深度沒有 % 數。
同樣會發現與 寬高元素(height、width) 很相似,而不同的地方也如同上面的例子。
使用方法transform: scale( X 軸, Y 軸 )
,當只有使用一個值,該值代表整體的放大縮小,如果想使用 Z 軸,就要改用scale3d(X 軸, Y 軸, Z 軸 )
或 scaleZ( Z 軸 )
。
使用的值為數字,1
為 1 倍大小,.8
為 0.8 倍大小
讓元素進行旋轉
使用方法transform: rotate( Z 軸 )
,依靠 Z 軸旋轉,如果想依靠 X 軸 或 y 軸,就要改用rotateX( X 軸 )
或 rotateY( Y 軸 )
。
使用的值需要單位
另外也可以使用 rotate3d( X 軸, Y 軸, Z 軸, 角度)
,其中 XYZ 軸為倍數,每個倍數乘以角度來呈現。
讓元素沿著軸線傾斜
使用方法transform: skew( X 軸, Y 軸 )
,當只有使用一個值,該值代表 X 軸,傾斜沒有 Z 值。
算是綜合了上面的平移、縮放與傾斜的語法。
語法:matrix(X 軸縮放, X 軸平移, X 軸傾斜, Y 軸縮放, Y 軸平移, Y 軸傾斜)
我個人是不常用,參數太多容易搞混。
前面在 Position 定位章節有提到,用 Position 定位置中 top: 50%; left: 50%;
會因為元素基準點是在左上角,導致左上角定位在中心,元素整體會呈現偏右下方。
這時藉由 transform: translate(-50%, -50%);
,因為 % 數是參考自身長寬,藉由 -50%
來矯正偏移問題,讓元素呈現完美的置中。
其實 transform 還有很多屬性方法還沒介紹,像是設定基準點、定位視角,這類更為抽象進階的語法,也許會放到之後補充的地方,今天就先介紹簡單常用入門的部分就好,下一個章節算是大家學 CSS 最想達成的動畫章節。