CSS 的各種 transxxx (transition / transform / translate )，不熟時候常常寫到茫掉，來篇筆記分類／整理一下好方便記憶＆查表：

Transform 相關屬性可分為 2D、3D 變形控制，礙於篇幅關係，本篇先就以 2D 類的屬性作整理。

Transform

transform 變形控制 (MDN)

2D 變形控制

• transform: rotate() 　旋轉
• transform: translate()　位置偏移
  • :translateX()
  • :translateY()
• transform: scale()　大小縮放
  • :scaleX()
  • :scaleY()
• transform: skew() 傾斜
  • :skewX()
  • :skewY()

• transform: none 不套用任何 transfrom 屬性

• transform-origin: (水平向, 垂直向)　指定變形物件起始點
  • 值:
    • 百分比
    • 數值
    • ( left / center / right , left / center / bottom )
  • 套用 transform 任一屬性時，預設 transform-origin: (50% 50%)

Transition

transition 轉場效果 (MDN)

定義動畫轉場屬性(套用範圍&時間&效果)

• transition-duration: 持續時間
• transition-delay: 延遲開始時間
• transition-property: 套用轉場的屬性
• transition-timing-function: 轉場(補間方式)效果函式
• transition: 時間 屬性 方法 延遲

參考資料

• transition|MDN
• transform|MDN

個人 Blog: https://eudora.cc/