柚子快報激活碼778899分享：動畫 CSS3學(xué)習(xí)第七天

http://yzkb.51969.com/

1、2d-平移translate（）

translate將元素向指定的方向移動，類似于position中的relative。

水平移動：向右移動translate（tx，0）和向左移動translate（-tx，0）；

垂直移動：向上移動translate（0，-ty）和向下移動translate（0，ty）；

對角移動：右下角移動translate（tx，ty）

? ? ? ? ? ? ? ? ??右上角移動translate（tx，-ty）

? ? ? ? ? ? ? ? ? 左上角移動translate（-tx，-ty）

? ? ? ? ? ? ? ? ? 左下角移動translate（-tx，-ty）。

translateX（）：水平方向移動一個對象。對象只向x軸進行移動，如果值為正值，對象向右移動

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 如果值為負值，對象向左移動

translateY（）：縱軸方向移動一個對象，對象只向Y軸進行移動，如果值為正值，對象向下移動

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?如果值為負值，對象向上移動

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

所以：

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

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

設(shè)置left屬性會頻繁的造成瀏覽器回流重排，而transform和opacity屬性不會，因為它是作為合成圖發(fā)送到GPU上，由顯卡執(zhí)行的渲染，這樣做的優(yōu)化如下：

可以通過亞像素精度得到一個運行在特殊優(yōu)化過的單位圖形任務(wù)上的平滑動畫，并且運行非?？靹赢嫴辉俳壎ǖ紺PU重排，而是通過GPU合成圖像，即使運行一個非常復(fù)雜到的JavaScript任務(wù)，動畫仍然會很快運行。

代碼練手：

2、2d-縮放scale（）

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

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

例如：

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

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

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

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

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

支持x軸? ，y軸單獨放大scaleX（），scaleY（）

代碼練手：

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

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

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

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

效果：

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

?

代碼：

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

5、2d-多屬性值

?

兩個transform不要一起寫，后面的會覆蓋前面的

注意平移和縮放寫的順序

效果：

?代碼：

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

效果：

代碼：

6、2d-傾斜

?效果：

?

代碼：

柚子快報激活碼778899分享：動畫 CSS3學(xué)習(xí)第七天

http://yzkb.51969.com/

推薦鏈接