css3中transform屬性如何實現(xiàn)的旋轉(zhuǎn)、縮放、傾斜、移動4種功能

本篇文章給大家分享的是有關(guān)css3中transform屬性如何實現(xiàn)的旋轉(zhuǎn)、縮放、傾斜、移動4種功能，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)公司從2013年創(chuàng)立，先為扶溝等服務(wù)建站，扶溝等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為扶溝企業(yè)網(wǎng)站制作PC+手機+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

1 transform屬性

在CSS3中，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。

（1）瀏覽器支持

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

2 旋轉(zhuǎn)

使用rotate方法，在參數(shù)中加入角度值，角度值后面跟表示角度單位的“deg”文字即可，旋轉(zhuǎn)方向為順時針方向。

transform：rotate（45deg）；

3 縮放

使用scale方法來實現(xiàn)文字或圖像的縮放處理，在參數(shù)中指定縮放倍率。

transform：scale（0.5）；//縮小一半

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

transform：scale（0.5，2）；//水平方向縮小一半，垂直方向放大一倍。

4 傾斜

使用skew方法實現(xiàn)文字或圖像的傾斜處理，在參數(shù)中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。

transform：skew（30deg，30deg）；//水平方向上傾斜30度，垂直方向上傾斜30度。

（1）只使用一個參數(shù)，省略另一個參數(shù)

這種情況下視為只在水平方向上進(jìn)行傾斜，垂直方向上不傾斜。

transform：skew（30deg）；

5 移動

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

transform：translate（50px，50px）；// 水平方向上移動50px，垂直方向上移動50px

（1）只使用一個參數(shù)，省略另一個參數(shù)

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

transform：translate（50px）；

6 對一個元素使用多種變形的方法

transform：translate（150px，200px） rotate（45deg） scale（1.5）；

7 指定變形的基準(zhǔn)點

在使用transform方法進(jìn)行文字或圖像變形的時候，是以元素的中心點為基準(zhǔn)點進(jìn)行變形的。

transform-origin屬性

使用該屬性，可以改變變形的基準(zhǔn)點。

transform：rotate（45deg）；
transform-origin：left bottom；//把基準(zhǔn)點修改為元素的左下角

（1）指定屬性值

基準(zhǔn)點在元素水平方向上的位置：left、center、right

基準(zhǔn)點在元素垂直方向上的位置：top、center、bottom

8 3D變形功能

（1）旋轉(zhuǎn)

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

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軸進(jìn)行縮放，在參數(shù)中指定縮放倍率。

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軸上進(jìn)行順時針方向傾斜（無skewZ方法），在參數(shù)中指定傾斜的角度

transform：skewX（45deg）；
transform：skewY（45deg）；

（4）移動

分別使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進(jìn)行移動，在參數(shù)中加入移動距離。

transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;

9 變形矩陣

每種變形方法的背后都存在著一個對應(yīng)的矩陣。

（1）計算2D變形（3 X 3矩陣）

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

（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）可通過矩陣執(zhí)行多重變形處理

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

以上就是css3中transform屬性如何實現(xiàn)的旋轉(zhuǎn)、縮放、傾斜、移動4種功能，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：css3中transform屬性如何實現(xiàn)的旋轉(zhuǎn)、縮放、傾斜、移動4種功能
URL鏈接：http://bm7419.com/article0/goesoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開發(fā)、網(wǎng)站制作、標(biāo)簽優(yōu)化、網(wǎng)站策劃、做網(wǎng)站、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)