iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 23
1
Modern Web

For 前端小幼苗的圖解筆記系列 第 23

[CSS] Transform 變形 & Transition 轉場

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: 時間 屬性 方法 延遲

參考資料


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


上一篇
[jQuery] 實例 Slideshow
下一篇
[CSS] Animation 動畫
系列文
For 前端小幼苗的圖解筆記30

尚未有邦友留言

立即登入留言