iT邦幫忙

2021 iThome 鐵人賽

DAY 19
1
自我挑戰組

前進切版之路! CSS微體驗系列 第 19

【心得】CSS-transform vs.relative 今天要吃哪一道呢~

  • 分享至 

  • xImage
  •  

前言

position 裡面有一個屬性叫 relative,可以讓物件根據原本的位置進行移動

transform 裡面也有一個屬性叫 translate ,也可以讓物件根據原本的位置進行移動

分享

一開始只以為是行數多跟行數少的差別
兩個都可以移動有什麼差別嘛!?
對初學者來說真是霧煞煞摸不清楚,哪個順手就用哪個唄!
後來發現還是以當下的狀況來判斷比較好呀

position 要透過top、bottom、left、right 來推位置

  position: relative;
  top: 200px;
  left: 300px;

transform: translate(X,Y) 則只需要一行

   transform: translate(300px,200px);

對懶人來說,transform 真棒啊~

但最重要的是在動畫上會有些許的差異呢
仔細看看這兩個圓,會發現用 relative 做出來的似乎在微微的抖動
而用translate做出來的運行則順滑的多了

codepen實作

這種情況在動畫時間長秒數且緩慢運行的狀況會更明顯

結論

很難說用哪個來運行會是絕對正確的
使用時還是要根據當下的情況判斷
若是遇到物件本身位置需要推移且需要加入動畫效果的情況
position: relative; 用來推移位置,
transform: translate(X,Y)則留做動畫使用會順很多~


上一篇
【踩坑】animation 選單按鈕動起來(實作篇)
下一篇
【心得】 會讓人暈3D的transform
系列文
前進切版之路! CSS微體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言