CSS3變形指的是利用transform屬性對元素進行旋轉(zhuǎn)、扭曲、縮放、位移、矩陣、原點等類型的變形處理；元素的變形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函數(shù)來實現(xiàn)。

南湖網(wǎng)站建設公司創(chuàng)新互聯(lián)建站,南湖網(wǎng)站設計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為南湖上千提供企業(yè)網(wǎng)站建設服務。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設要多少錢，請找那個售后服務好的南湖做網(wǎng)站的公司定做！

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

什么是css3變形

在CSS3中，可以利用transform功能來實現(xiàn)文字或圖像的旋轉(zhuǎn)、扭曲、縮放、位移、矩陣、原點這六種類型的變形處理，下面將詳細講解transform的使用。

變形--旋轉(zhuǎn) rotate()

div.box{transform: rotate(45deg);} /*順時針旋轉(zhuǎn)45度*/

變形--扭曲 skew()

div.box{transform:skew(45deg);} /*通過skew（）函數(shù)將長方形變成平行四邊形。*/

Skew()具有三種情況：

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

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

3、skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）變形--縮放 scale()

div.box{transform: scale(1.5,0.5);}

縮放 scale 具有三種情況：

1、 scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）

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

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

scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大。

變形--位移 translate()

div.box{transform: translate(50px,100px);} /* 通過translate()函數(shù)將元素向Y軸下方移動50px,X軸右方移動100px。 */

translate我們分為三種情況：

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

2、translateX(x)僅水平方向移動（X軸移動）

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

變形--矩陣 matrix ()

div.box{transform: matrix(1,0,0,1,100,100);} /* matrix() 6個屬性的意思的：第一個寬度比例1就是原大小，第二個是上下傾斜1就是2倍，2就是3倍，0就是不傾斜第三個是左右傾斜，數(shù)字和第二個一樣的意思，第四個是高度比例1就是原大小，第五個是X方向的像素位移，X方向就是左右，第六個是Y方向的像素位移，X方向就是上下*/

變形--原點 transform-origin

div.box{transform-origin: left top;transform: rotate(45deg); }

改變元素原點到左上角，然后進行順時旋轉(zhuǎn)45度。

（學習視頻分享：css視頻教程）

文章標題：CSS3變形是什么
網(wǎng)站URL：http://chinadenli.net/article24/cpcije.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設計、網(wǎng)站設計公司、移動網(wǎng)站建設

廣告

聲明：本網(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)