CSS3轉換和動畫

2d轉換

transform屬性

屬性值有:

translate（平移，單位px）

rotate（旋轉，單位deg）

scale（縮放，給定倍數）

skew（翻轉，根據x軸，y軸，單位deg）

matrix（函式式，自定義）

3d轉換

transfrom屬性

屬性值rotatex(單位deg)

rotatey(單位deg)

過渡動畫

animation屬性

@keyframes規則

internet explorer 10、firefox 以及 opera 支援 @keyframes 規則和 animation 屬性。

chrome 和 safari 需要字首 -webkit-。

@keyframes myfirst

to }

from同0%

to同100%

在keyframes中建立動畫後，要把它繫結到某個選擇器，至少要規定動畫名稱，動畫時長

CSS3 轉換和變形

以下列出了所有的轉換屬性 property 描述transform 適用於2d或3d轉換的元素 transform origin 允許您更改轉化元素位置 2d 轉換方法 函式描述 matrix n,n,n,n,n,n 定義 2d 轉換，使用六個值的矩陣。translate x,y 定義 2d 轉換，...

css3 轉換 旋轉 過渡 動畫

css3 轉換 旋轉 過渡 動畫 轉換 transform 轉換 translate x,y 位移 translatex 設定水平方向位移 translatey 設定垂直方向位移 旋轉 rotate 旋轉 transform rotate 45deg scale 縮放 transform scale...

筆記 CSS3轉換

1.旋轉 rotate 通過指定的角度引數對原元素指定乙個2d旋轉 語法 transform rotate angle angle 旋轉角度，正數表示順時針旋轉，負數表示逆時針旋轉 2.移動 translate 根據左 x 和頂 y 位置給定的引數，從當前元素位置移動 1 translatex 語法...