css3 變形/變換

相關屬性

• transform
• transform-origin
• transform-style:flat/preserve-3d
• perspective: 長度單位
• perspective-origin觀察者的位置
• backface-visibialbe:visible/hidden
  

變形方法 transform-function

• 2d
• translate() 位移(像素/百分號)
• translatex()
• translatey()
• scale() 縮放(倍數)
• scalex()
• scaley()
• rotate() 旋轉(角度deg)
• skew() 扭曲(角度)x扭曲y變x不變
• skewx()
• skewy()
• 3d
• translatez()
• translate3d()
• scalez()
• scale3d()
• rotatex()
• rotatey()

• rotatez()

  css過渡

  相關屬性

• transition
• transition-property過渡屬性
• none

• all所有可以進行過渡的CSS屬性
  

• transition-timing-function 過渡方式
• linear： 線性過渡
• ease： 平滑過渡。
• ease-in： 由慢到快。
• ease-out： 由快到慢

• ease-in-out： 由慢到快再到慢
  

• transition-duriation過渡時間

• transition-delay延遲

  觸發時機

• 偽類選擇器
• JS

• 媒體查詢

  CSS3動畫

  相關屬性

• animation
• animation-name動畫名稱
• animation-iteration-count循環次數infinite無限循環

• animation-duration動畫持續時間
  

• animation-timing-function動畫的過渡類型
• linear： 線性過渡
• ease： 平滑過渡。
• ease-in： 由慢到快。
• ease-out： 由快到慢

• ease-in-out： 由慢到快再到慢。
  

• animation-delay動畫延遲時間
• animation-dirction動畫方向
• normal： 正常方向
• reverse： 反方向運行
• alternate： 動畫先正常運行再反方向運行，并持續交替運行
• alternate-reverse： 動畫先反運行再正方向運行，并持續交替運行
  
• animation-play-state:running運動/pasused暫停
• animation-fill-mode:動畫時間之外的狀態
• none： 默認值。不設置對象動畫之外的狀態
• forwards： 設置對象狀態為動畫結束時的狀態
• backwards： 設置對象狀態為動畫開始時的狀態

• both： 設置對象狀態為動畫結束或開始的狀態
  

關鍵幀

@keyframes 動畫名稱{form{}to{} }

轉載于:https://www.cnblogs.com/DCL1314/p/7305995.html

總結

以上是生活随笔為你收集整理的CSS变形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。