css3中transform屬性實現的4種功能（旋轉、縮放、傾斜、移動）

這篇文章帶給大家的內容是關於css3中transform屬性實現的4種功能（旋轉、縮放、傾斜、移動），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

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）可通过矩阵执行多重变形处理

将需要的变形矩阵相乘得到一个新的变形矩阵可实现该处理。

相关推荐：

CSS3的transform属性_html/css_WEB-ITnose

CSS3的属性transition、animation、transform

以上是css3中transform屬性實現的4種功能（旋轉、縮放、傾斜、移動）的詳細內容。更多資訊請關注PHP中文網其他相關文章！