柚子快報(bào)激活碼778899分享：動(dòng)畫(huà) CSS3學(xué)習(xí)第七天

http://yzkb.51969.com/

1、2d-平移translate（）

translate將元素向指定的方向移動(dòng)，類(lèi)似于position中的relative。

水平移動(dòng)：向右移動(dòng)translate（tx，0）和向左移動(dòng)translate（-tx，0）；

垂直移動(dòng)：向上移動(dòng)translate（0，-ty）和向下移動(dòng)translate（0，ty）；

對(duì)角移動(dòng)：右下角移動(dòng)translate（tx，ty）

? ? ? ? ? ? ? ? ??右上角移動(dòng)translate（tx，-ty）

? ? ? ? ? ? ? ? ? 左上角移動(dòng)translate（-tx，-ty）

? ? ? ? ? ? ? ? ? 左下角移動(dòng)translate（-tx，-ty）。

translateX（）：水平方向移動(dòng)一個(gè)對(duì)象。對(duì)象只向x軸進(jìn)行移動(dòng)，如果值為正值，對(duì)象向右移動(dòng)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果值為負(fù)值，對(duì)象向左移動(dòng)

translateY（）：縱軸方向移動(dòng)一個(gè)對(duì)象，對(duì)象只向Y軸進(jìn)行移動(dòng)，如果值為正值，對(duì)象向下移動(dòng)

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如果值為負(fù)值，對(duì)象向上移動(dòng)

這兩個(gè)函數(shù)和前面介紹的translate（）函數(shù)不同的地方是每個(gè)方向只接受一個(gè)值。

所以：

transform：translate（-100px，0）之際上等于transform：translateX（-100px）

transform：translate（0，-100px）之際上等于transform：translateY（-100px）

設(shè)置left屬性會(huì)頻繁的造成瀏覽器回流重排，而transform和opacity屬性不會(huì)，因?yàn)樗亲鳛楹铣蓤D發(fā)送到GPU上，由顯卡執(zhí)行的渲染，這樣做的優(yōu)化如下：

可以通過(guò)亞像素精度得到一個(gè)運(yùn)行在特殊優(yōu)化過(guò)的單位圖形任務(wù)上的平滑動(dòng)畫(huà)，并且運(yùn)行非?？靹?dòng)畫(huà)不再綁定到CPU重排，而是通過(guò)GPU合成圖像，即使運(yùn)行一個(gè)非常復(fù)雜到的JavaScript任務(wù)，動(dòng)畫(huà)仍然會(huì)很快運(yùn)行。

代碼練手：

2、2d-縮放scale（）

讓元素根據(jù)中心原點(diǎn)對(duì)對(duì)象進(jìn)行縮放，默認(rèn)的值1.因此0.01到0.99之間的任何值，使一個(gè)元素縮??；而任何大于或等于1.01的值，讓元素顯得更大。

縮放scale（）函數(shù)和translate（）函數(shù)的語(yǔ)法非常相似，他可以接受一個(gè)值，也可以同時(shí)接受兩個(gè)值，如果只有一個(gè)值時(shí)，其第二個(gè)值默認(rèn)與第一個(gè)值相等。

例如：

scale（1,1）元素不會(huì)有任何變化，而scale（2,2）讓元素沿X軸和Y軸放大兩倍。

scaleX（）：相當(dāng)于scale（sx，1）。表示元素只在X軸（水平方向）縮放元素，其默認(rèn)值是1。

scaleY（）：相當(dāng)于scale（1，sy）。表示元素只在Y軸（垂直方向）縮放元素，其默認(rèn)值是1

?scale（）里邊填負(fù)值-1.5，是倒向放大的效果

? ? ? ? ? ? ? ? ? ? ?????????????? ?-0.5? 是倒放縮小的效果

支持x軸? ，y軸單獨(dú)放大scaleX（），scaleY（）

代碼練手：

3、2d-旋轉(zhuǎn)rotate（）

?rotate（繞著中心轉(zhuǎn)）===rotateZ

transform-origin：用來(lái)改變旋轉(zhuǎn)中心的點(diǎn)

4、2d-旋轉(zhuǎn)-折扇效果案例

效果：

????????????????鼠標(biāo)未放上去之前? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 鼠標(biāo)放上去之后

?

代碼：

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

5、2d-多屬性值

?

兩個(gè)transform不要一起寫(xiě)，后面的會(huì)覆蓋前面的

注意平移和縮放寫(xiě)的順序

效果：

?代碼：

注意平移和旋轉(zhuǎn)

效果：

代碼：

6、2d-傾斜

?效果：

?

代碼：

柚子快報(bào)激活碼778899分享：動(dòng)畫(huà) CSS3學(xué)習(xí)第七天

http://yzkb.51969.com/

推薦鏈接