CSS3中的變形處理——transform功能(旋轉、縮放、傾斜、移動)


1 transform屬性
在CSS3中,可以利用transform功能實現文字或圖像的旋轉、縮放、傾斜、移動這4中類型的變形處理。

(1)瀏覽器支持

到目前為止:Safari3.1以上、Chrome8以上、Firefox4以上、Opera10以上瀏覽器支持該屬性。

2 旋轉
使用rotate方法,在參數中加入角度值,角度值后面跟表示角度單位的“deg”文字即可,旋轉方向為順時針方向。

transform:rotate(45deg);

3 縮放 
使用scale方法來實現文字或圖像的縮放處理,在參數中指定縮放倍率。

transform:scale(0.5);//縮小一半

(1)可以分別指定元素的水平方向的放大倍率與垂直方向的放大倍率

transform:scale(0.5,2);//水平方向縮小一半,垂直方向放大一倍。

4 傾斜 
使用skew方法實現文字或圖像的傾斜處理,在參數中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。

transform:skew(30deg,30deg);//水平方向上傾斜30度,垂直方向上傾斜30度。

(1)只使用一個參數,省略另一個參數

這種情況下視為只在水平方向上進行傾斜,垂直方向上不傾斜。

transform:skew(30deg);

5 移動
使用translate方法來移動文字或圖像,在參數中分別指定水平方向上的移動距離與垂直方向上的移動距離。

transform:translate(50px,50px);// 水平方向上移動50px,垂直方向上移動50px

(1)只使用一個參數,省略另一個參數

這種情況下視為只在水平方向上移動,垂直方向上不移動。

transform:translate(50px);

6 對一個元素使用多種變形的方法
transform:translate(150px,200px) rotate(45deg) scale(1.5);

7 指定變形的基准點
在使用transform方法進行文字或圖像變形的時候,是以元素的中心點為基准點進行變形的。

transform-origin屬性
使用該屬性,可以改變變形的基准點。

transform:rotate(45deg);

transform-origin:left bottom;//把基准點修改為元素的左下角

(1)指定屬性值

基准點在元素水平方向上的位置:left、center、right

基准點在元素垂直方向上的位置:top、center、bottom

8 3D變形功能
(1)旋轉

分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉,在參數中加入角度值,角度值后面跟表示角度單位的deg文字即可,旋轉方向為順時針旋轉。

transform:rotateX(45deg);

transform:rotateY(45deg);

transform:rotateZ(45deg);

transform:rotateX(45deg) rotateY(45deg) rotateZ(45deg);

transform:scale(0.5) rotateY(45deg) rotateZ(45deg);

(2)縮放

分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放,在參數中指定縮放倍率。

transform:scaleX(0.5);

transform:scaleY(1);

transform:scaleZ(2);

transform:scaleX(0.5)scaleY(1);

transform:scale(0.5) rotateY(45deg);

(3)傾斜

分別使用skewX方法、skewY方法使元素在X軸、Y軸上進行順時針方向傾斜(無skewZ方法),在參數中指定傾斜的角度

transform:skewX(45deg);

transform:skewY(45deg);

(4)移動

分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動,在參數中加入移動距離。

transform:translateX(50px);

transform:translateY(50px);

transform:translateZ(50px);

9 變形矩陣
每種變形方法的背后都存在着一個對應的矩陣。

(1)計算2D變形(3 X 3矩陣)

可以將這個2D變形矩陣書寫為matrim(a,b,c,d,e,f),a~f均代表一個數字,用於決定怎樣執行變形處理。

(2)平移的2D矩陣

//效果一致:右移150px,下移150px

transform:matrix(1,0,0,1,150,150);

transform:translate(150px,150px);

(3)計算3D變形

3D縮放變形使用的4X4矩陣

transform:matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);

//效果一致:X軸方向上縮小五分之一,Y軸方向上縮小一半。

transform:scale3d(0.8,0.5,1);

transform:matrix3d(0.8,0,0,0,0,0.5,0,0,0,0,1,0,0,0,0,1);

(4)可通過矩陣執行多重變形處理

將需要的變形矩陣相乘得到一個新的變形矩陣可實現該處理。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2024 CODEPRJ.COM