css3 變形/變換

相關(guān)屬性

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

變形方法 transform-function

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

• rotatez()

  css過(guò)渡

  相關(guān)屬性

• transition
• transition-property過(guò)渡屬性
• none

• all所有可以進(jìn)行過(guò)渡的CSS屬性
  

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

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

• transition-duriation過(guò)渡時(shí)間

• transition-delay延遲

  觸發(fā)時(shí)機(jī)

• 偽類選擇器
• JS

• 媒體查詢

  CSS3動(dòng)畫

  相關(guān)屬性

• animation
• animation-name動(dòng)畫名稱
• animation-iteration-count循環(huán)次數(shù)infinite無(wú)限循環(huán)

• animation-duration動(dòng)畫持續(xù)時(shí)間
  

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

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

• animation-delay動(dòng)畫延遲時(shí)間
• animation-dirction動(dòng)畫方向
• normal： 正常方向
• reverse： 反方向運(yùn)行
• alternate： 動(dòng)畫先正常運(yùn)行再反方向運(yùn)行，并持續(xù)交替運(yùn)行
• alternate-reverse： 動(dòng)畫先反運(yùn)行再正方向運(yùn)行，并持續(xù)交替運(yùn)行
  
• animation-play-state:running運(yùn)動(dòng)/pasused暫停
• animation-fill-mode:動(dòng)畫時(shí)間之外的狀態(tài)
• none： 默認(rèn)值。不設(shè)置對(duì)象動(dòng)畫之外的狀態(tài)
• forwards： 設(shè)置對(duì)象狀態(tài)為動(dòng)畫結(jié)束時(shí)的狀態(tài)
• backwards： 設(shè)置對(duì)象狀態(tài)為動(dòng)畫開始時(shí)的狀態(tài)

• both： 設(shè)置對(duì)象狀態(tài)為動(dòng)畫結(jié)束或開始的狀態(tài)
  

關(guān)鍵幀

@keyframes 動(dòng)畫名稱{form{}to{} }

轉(zhuǎn)載于:https://www.cnblogs.com/DCL1314/p/7305995.html

總結(jié)

以上是生活随笔為你收集整理的CSS变形的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。