css3中transform屬性如何實(shí)現(xiàn)

這篇文章主要介紹css3中transform屬性如何實(shí)現(xiàn)，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

　　1transform屬性

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

　?。?）瀏覽器支持

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

　　2旋轉(zhuǎn)

　　使用rotate方法，在參數(shù)中加入角度值，角度值后面跟表示角度單位的“deg”文字即可，旋轉(zhuǎn)方向?yàn)轫槙r(shí)針?lè)较颉?/p>

　　transform：rotate（45deg）；

　　3縮放

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

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

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

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

　　4傾斜

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

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

　?。?）只使用一個(gè)參數(shù)，省略另一個(gè)參數(shù)

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

　　transform：skew（30deg）；

　　5移動(dòng)

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

　　transform：translate（50px，50px）；//水平方向上移動(dòng)50px，垂直方向上移動(dòng)50px

　?。?）只使用一個(gè)參數(shù)，省略另一個(gè)參數(shù)

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

　　transform：translate（50px）；

　　6對(duì)一個(gè)元素使用多種變形的方法

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

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

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

　　transform-origin屬性

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

　　transform：rotate（45deg）；

　　transform-origin：leftbottom；//把基準(zhǔn)點(diǎn)修改為元素的左下角

　?。?）指定屬性值

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

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

　　83D變形功能

　　（1）旋轉(zhuǎn)

　　分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉(zhuǎn)，在參數(shù)中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉(zhuǎn)方向?yàn)轫槙r(shí)針旋轉(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)行順時(shí)針?lè)较騼A斜（無(wú)skewZ方法），在參數(shù)中指定傾斜的角度

　　transform：skewX（45deg）；

　　transform：skewY（45deg）；

　　（4）移動(dòng)

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

　　transform：translateX（50px）;

　　transform：translateY（50px）;

　　transform：translateZ（50px）;

　　9變形矩陣

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

　?。?）計(jì)算2D變形（3X3矩陣）

　　\begin{bmatrix}a&c&e\\b&d&f\\0&0&1\end{bmatrix}

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

　　（2）平移的2D矩陣

　　\begin{bmatrix}1&0&tx\\0&1&ty\\0&0&1\end{bmatrix}

　　//效果一致：右移150px，下移150px

　　transform：matrix（1，0,0,1，150，150）；

　　transform：translate（150px，150px）；

　　（3）計(jì)算3D變形

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

　　\begin{bmatrix}sx&0&0&0\\0&sy&0&0\\0&0&sz&0\\0&0&0&1\end{bmatrix}

　　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);

　?。?）可通過(guò)矩陣執(zhí)行多重變形處理

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

以上是“css3中transform屬性如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！