先來了解一下兩個css3的屬性(當前學習到并理解的屬性)

1.transform(變換)

語法：
transform ： none | <transform-function> [ <transform-function> ]*


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


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

2.transition(過度)

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


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


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)四個值特定于曲線上點P1和點P2。所有值需在[0, 1]區(qū)域內(nèi)，否則無效。

實際演示：

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


利用a 的hover來制作移動上去變換的效果
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>

總結

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

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