CSS3變形與動畫上

transform:rotate(-20deg);/*   以自己中心點為旋轉中心，順時針+逆時針-       */

transform:skew(-45deg);

1、skew(x,y)使元素在水平和垂直方向同時扭曲（x軸和y軸同時按一定的角度值進行扭曲變形）

2、skewx(x)僅使元素在水平方向扭曲變形（x軸扭曲變形）

3、skewy(y)僅使元素在垂直方向扭曲變形（y軸扭曲變形）

4、skew(x)使元素在水平方向扭曲（y軸預設為0）

1、 scale(x,y)使元素水平方向和垂直方向同時縮放（也就是x軸和y軸同時縮放）

2、scalex(x)元素僅水平方向縮放（x軸縮放）

3、scaley(y)元素僅垂直方向縮放（y軸縮放）

4、 scale(x)使元素水平方向縮放（y軸預設為0）

transform:translate(-50%,-50%);

1、translate(x,y)水平方向和垂直方向同時移動（也就是x軸和y軸同時移動）

2、translatex(x)僅水平方向移動（x軸移動）

3、translatey(y)僅垂直方向移動（y軸移動）

4、translate(x)水平方向移動（y軸預設為0）

transform: matrix(1,0,0,1,50,50);  /*通過matrix()函式來模擬transform中translate()位移的效果。*/

可以忽略前四個引數，後面兩個引數代表位移。

matrix(1,0,0,1,20,30)偏移

此時前四個不變，後兩個是偏移，比如向右下偏移20,30

matrix(1,0,0,1,20,30)縮放

此時兩個1是縮放比例，

matrix(sx, 0, 0, sy, 0, 0)等同於scale(sx, sy);

matrix(cosθ,sinθ,-sinθ,cosθ,0,0)旋轉

此時

後兩個不變，
前四個是旋轉，比如旋轉45度，則sinθ=
√2/2

matrix(1,tan(θy),tan(θx),1,0,0)拉伸

此時

兩個正切值是
軸傾斜角度x' = x+y*tan(θx)+0 = x+y*tan(θx) 
y' = x*tan(θy)+y+0 = y+x*tan(θy)

對應於skew(θx + "deg"，θy+ "deg")詳解：

CSS3變形與動畫下

keyframes被稱為關鍵幀，其類似於flash中的關鍵幀。在css3中其主要以 keyframes 開頭，後面緊跟著是動畫名稱加上一對花括號 括號中就是一些不同時間段樣式規則。在乙個 keyframes 中的樣式規則可以由多個百分比構成的，如在 0 到 100 之間建立更多個百分比，分別給每個百...

CSS3 變形與動畫效果

1.旋轉rotate 函式通過指定的角度引數使元素相對原點進行旋轉。它主要在二維空間內進行操作，設定乙個角度值，用來指定旋轉的幅度。如果這個值為正值，則元素相對原點中心順時針旋轉 如果這個值為負值，元素相對原點中心逆時針旋轉。transform rotate 20deg 2.扭曲skew 函式能夠讓...

CSS3中的變形與動畫

css3常見的動畫效果的實現，其實主要是靠transition和animation。而通常，這兩個又會和css3中的新屬性transform來搭配使用 那麼這三個東西其實是幹什麼用的呢？我按我自己的理解來下個簡單結論。transform 把元素變形 transition 元素的屬性變化時，給他乙個過...