先來(lái)了解一下兩個(gè)css3的屬性(當(dāng)前學(xué)習(xí)到并理解的屬性)

1.transform(變換)

語(yǔ)法：
transform ： none | <transform-function> [ <transform-function> ]*


取值：
scale(<number>[, <number>])
提供執(zhí)行[sx,sy]縮放矢量的兩個(gè)參數(shù)指定一個(gè)2D scale（2D縮放）。如果第二個(gè)參數(shù)未提供，則取與第一個(gè)參數(shù)一樣的值。
scaleX(<number>) ：
使用 [sx,1] 縮放矢量執(zhí)行縮放操作，sx為所需參數(shù)。
scaleY(<number>) ：
使用 [i,sy] 縮放矢量執(zhí)行縮放操作，sy為所需參數(shù)。
rotate(<angle>) ：
通過(guò)指定的角度參數(shù)對(duì)原元素指定一個(gè)2D rotation（2D 旋轉(zhuǎn)），需先有transform-origin屬性的定義。


實(shí)際演示：
-webkit-transform:rotate(10deg);//順向旋轉(zhuǎn)10度，其中deg為度的意思，反方向的話用負(fù)值
-webkit-transform:scala(1.5);//放大1.5倍
兩者可以合并寫法是
-webkit-transform:rotate(10deg) scala(1.5);

2.transition(過(guò)度)

語(yǔ)法：
transition ： [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*


取值：
transition-property:
需要過(guò)度的屬性
transition-duration:
過(guò)度執(zhí)行的時(shí)間（以s為單位）
transition-timing-function:
過(guò)度的緩動(dòng)


ease：ease函數(shù)等同于貝塞爾曲線(0.25, 0.1, 0.25, 1.0).
linear：linear 函數(shù)等同于貝塞爾曲線(0.0, 0.0, 1.0, 1.0).
ease-in：ease-in 函數(shù)等同于貝塞爾曲線(0.42, 0, 1.0, 1.0).
ease-out：ease-out 函數(shù)等同于貝塞爾曲線(0, 0, 0.58, 1.0).
ease-in-out：ease-in-out 函數(shù)等同于貝塞爾曲線(0.42, 0, 0.58, 1.0)
cubic-bezier：特定的cubic-bezier曲線。 (x1, y1, x2, y2)四個(gè)值特定于曲線上點(diǎn)P1和點(diǎn)P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無(wú)效。

實(shí)際演示：

-webkit-transition:all 0.5s ease-in;合并寫法


利用a 的hover來(lái)制作移動(dòng)上去變換的效果
a{ display:block; width: 100px; height: 100px; border:solid 1px #9A9A9A; background-color: white; box-shadow: 5px 5px 5px gray; -webkit-transform:rotate(10deg); -webkit-transition:all 0.5s ease-in; } a:hover{ -webkit-transform:rotate(0deg) scale(1.05) }
<a href=""></a>

總結(jié)

以上是生活随笔為你收集整理的css3-定时缓动效果与块旋转的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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