Day 02 - CSS 變形基礎
說到 CSS 的變形,大家都會聯想到 transform
這個屬性,這個屬性可以讓我們對元素進行旋轉、縮放、移動和傾斜等效果。
基本上,對於部分前端工程師來說,transform
這個屬性也不是很陌生,有一道經典的面試考題是這樣的:
請問如何將原素做置中效果?
這題答案有好幾個,我們不討論 flex
或 grid
的方式,我們來談談 transform
:
<div class="parent position">
<div></div>
</div>
.parent {
border: black solid 3px;
width: 20vw;
aspect-ratio: 1;
position: relative;
div {
border: red solid 2px;
width: 5vw;
aspect-ratio: 1;
background-color: red;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
在上述的例子中,如果僅透過 position: absolute;
來做置中,我們會發現是元素的左上角會被置中,而不是元素的中心點被置中。
這時後透過 transform: translate(-50%, -50%);
,使元素向左及向右各移動自身寬度的一半,就可以達到元素的中心點被置中的效果。
這就是 transform
的一個常見應用。
transform
的大家族
transform
當然不只有 translate
一個方法,還有非常多的方法可以讓我們對元素進行變形,我做了一個簡表:
方法 | 簡介 | 簡單範例代碼 |
---|---|---|
translate | 將元素在水平和垂直方向上移動。 | transform: translate(50px, 60px); |
translateX | 只在水平方向 (X 軸) 上移動元素。 | transform: translateX(50px); |
translateY | 只在垂直方向 (Y 軸) 上移動元素。 | transform: translateY(60px); |
scale | 根據提供的比例縮放元素。 | transform: scale(1.5, 0.75); |
scaleX | 只在水平方向縮放元素。 | transform: scaleX(1.5); |
scaleY | 只在垂直方向縮放元素。 | transform: scaleY(0.75); |
rotate | 以指定角度旋轉元素。 | transform: rotate(15deg); |
skew | 根據提供的角度傾斜元素,形成一個平行四邊形的效果。 | transform: skew(15deg, 30deg); |
skewX | 只在水平方向傾斜元素。 | transform: skewX(15deg); |
skewY | 只在垂直方向傾斜元素。 | transform: skewY(30deg); |
matrix | 等同 matrix(scaleX, skewY, skewX, scaleY, translateX, translateY) ,但須要把角度轉成弧度 | transform: matrix(1.5, 0.5, 0.3, 0.75, 50px, 60px); |
perspective | 以三維視角透視的方式看元素,使其有遠近的深度感。 | transform: perspective(100px) rotateX(30deg); |
rotateX | 繞 X 軸旋轉元素 (3D 旋轉)。 | transform: rotateX(60deg); |
rotateY | 繞 Y 軸旋轉元素 (3D 旋轉)。 | transform: rotateY(60deg); |
rotateZ | 繞 Z 軸旋轉元素 (與 rotate 一樣,3D 旋轉)。 | transform: rotateZ(15deg); |
translateZ | 在 Z 軸上移動元素 (3D 轉換),搭配 rotateX 跟 rotateY 較看得出效果。 | transform: translateZ(100px); |
scaleZ | 只在 Z 軸縮放元素 (3D 轉換) 。 | transform: scaleZ(2); |
skewZ | 繞 Z 軸傾斜元素 (3D 轉換) 。 | transform: skewZ(10deg); |
transition
又是什麼?
如果你夠細心,你會發現 transform
的變形是在瞬間 完成的,這樣的效果有時候會讓人感到突兀,這時候就可以使用 transition
來讓變形的過程變得平滑。
基本的 transition
寫法如下:
.element {
transition: property duration timing-function delay;
}
property
:指定要變化的 CSS 屬性,例如transform
。duration
:指定變化的時間,例如1s
。timing-function
:指定變化的速度曲線,例如ease-in-out
。delay
:指定變化的延遲時間,例如2s
。
現在來看個實際例子,在這個例子中,當滑鼠懸停在元素上時,元素的寬度會從 100px 變成 200px,並且會在 1 秒內完成,且會有 2 秒的延遲時間:
.element {
width: 100px;
height: 100px;
background-color: red;
transition: width 1s ease-in-out 2s;
}
.element:hover {
width: 200px;
}