本篇內(nèi)容主要講解“css3的transform屬性怎么用”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“css3的transform屬性怎么用”吧!

成都創(chuàng)新互聯(lián)主要從事網(wǎng)站建設(shè)、成都網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)海晏,10余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

transform是css3的新增屬性，用來設(shè)置元素的形狀改變，實現(xiàn)元素的2D或3D轉(zhuǎn)換，可以配合屬性值（轉(zhuǎn)換函數(shù)）來對將元素進(jìn)行旋轉(zhuǎn)rotate、扭曲skew、縮放scale、移動translate以及矩陣變形matrix。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

Transform字面上就是變形，改變的意思，是css3的新增屬性，用來設(shè)置元素的形狀改變，實現(xiàn)元素的2D或3D轉(zhuǎn)換。

在CSS3中transform主要包括以下幾種：旋轉(zhuǎn)rotate、扭曲skew、縮放scale和移動translate以及矩陣變形matrix。

rotate 旋轉(zhuǎn)

通過指定角度對元素進(jìn)行旋轉(zhuǎn)度數(shù)為正順時針旋轉(zhuǎn)，如果設(shè)置的值為正數(shù)表示順時針旋轉(zhuǎn)，如果設(shè)置的值為負(fù)數(shù)，則表示逆時針旋轉(zhuǎn)。
例：

效果：

scale 縮放

scale 具有三種情況：

• scale(x,y)使元素水平方向和垂直方向同時縮放

• scaleX(x)元素僅水平方向縮放（X軸縮放）

• scaleY(y)元素僅垂直方向縮放（Y軸縮放）

.box{
	transfrom:scale(2,2)
}
.box{
	transfrom:scaleX(2)
}
.box{
	transfrom:scaleY(2)
}

效果圖：

translate 移動

移動translate分為三種情況：

• translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）；

• translateX(x)僅水平方向移動（X軸移動）；

• translateY(Y)僅垂直方向移動（Y軸移動）

translate(x,y)

.box{
	transfrom：translate(100px,20px);
}

transform:translateX()

.box{
        transform:translateX(100px);
    }

transform:translateY()

.box{
		transform:translateY(100px);
}

skew 扭曲

skew也分為三種情況

• skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進(jìn)行扭曲變形）；

• skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

• skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

.box{
		 transform:skew(20deg,20deg);
}
.box{
		 transform:skewX(20deg);
}
.box{
		 transform:skewY(20deg);
}

transform-origin 改變元素基點
transform-origin(X,Y)：用來設(shè)置元素的運動的基點（參照點）。默認(rèn)點是元素的中心點。其中X和Y的值可以是百分值、em、px，其中X也可以是字符參數(shù)值left、center、right；Y和X一樣除了百分值外還可以設(shè)置字符值top、center、bottom

到此，相信大家對“css3的transform屬性怎么用”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！