[CSS] 關於transform 變形屬性及 transition 轉場效果

Photo by Sigmund on Unsplash

在CSS裡面有很多很好用的屬性效果，能輕易地做出簡易的動畫，讓使用者體驗更好~ 其中 transform及 transition 這兩個屬性也是能見度極高的用法。

transform 屬於CSS3 的新的語法，考慮到瀏覽器是否支援，可加入前綴。

transform 變形屬性

rotate() — 旋轉

透過這個rotate 我們能夠將元素旋轉，單位是 度數 deg ，順時鐘為正的，逆時針為負的。

perspective — 透視

perspective: 100px;

transform 搭配屬性perspective也可做3D旋轉，設定位置放在父層元素。

因為rotate 能夠指定 X,Y,Z 軸向，做旋轉的方向。

我們可以把這個設定距離想像為，當perspective的值越大，離螢幕越遠，反之亦然。

translate — 變形

水平跟垂直的移動。

Tip: 使用translate讓物件置中。

html,body {
  height: 100%;
}
.wrapper {
  position: relative;
  height: 100%;
}
.box {
  width: 50px;
  height: 50px;
  background-color: #333;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

transition 轉場效果

製作CSS動畫效果的入門方法，使用 transition 能夠做出動畫特效。

transition-property

屬性變化，能夠指定要變化的屬性。

transition-property: width 0.5s; //指定width屬性 變化時間0.5秒鐘
transition-property: all 0.5s;  //指定這個元素里全部都要套用這個變化

transition-duration & transition-delay

秒數期間:用來設定轉場效果需要花多少時間完成轉場，轉場時間越長，動畫效果的呈現越慢~

延遲時間: 設定延遲時間後，在載入頁面/重新整理後延遲(設定的時間)後才會跑轉場效果。

transition-timing-function

時間變化曲線,是由貝茲曲線去決定的。ex. ease-in

縮寫格式 :

transition: 裡面值可以調換除了時間 (第一個duration 第二個delay)