css3變形指的是利用transform屬性對(duì)元素進(jìn)行旋轉(zhuǎn)、扭曲、縮放、位移、矩陣、原點(diǎn)等類(lèi)型的變形處理；元素的變形操作需要配合使用rotate()、skew()、scale()、translate()、matrix()等函數(shù)來(lái)實(shí)現(xiàn)。
本教程操作環(huán)境：windows7系統(tǒng)、css3&&html5版、dell g3電腦。
什么是css3變形
在css3中，可以利用transform功能來(lái)實(shí)現(xiàn)文字或圖像的旋轉(zhuǎn)、扭曲、縮放、位移、矩陣、原點(diǎn)這六種類(lèi)型的變形處理，下面將詳細(xì)講解transform的使用。
變形–旋轉(zhuǎn) rotate()
div.box{transform: rotate(45deg);} /*順時(shí)針旋轉(zhuǎn)45度*/
變形–扭曲 skew()
div.box{transform:skew(45deg);} /*通過(guò)skew（）函數(shù)將長(zhǎng)方形變成平行四邊形。*/
skew()具有三種情況：
1、skew(x,y)使元素在水平和垂直方向同時(shí)扭曲（x軸和y軸同時(shí)按一定的角度值進(jìn)行扭曲變形）；
2、skewx(x)僅使元素在水平方向扭曲變形（x軸扭曲變形）；
3、skewy(y)僅使元素在垂直方向扭曲變形（y軸扭曲變形）變形–縮放 scale()
div.box{transform: scale(1.5,0.5);}
縮放 scale 具有三種情況：
1、 scale(x,y)使元素水平方向和垂直方向同時(shí)縮放（也就是x軸和y軸同時(shí)縮放）
2、scalex(x)元素僅水平方向縮放（x軸縮放）
3、scaley(y)元素僅垂直方向縮放（y軸縮放）
scale()的取值默認(rèn)的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個(gè)元素縮小；而任何大于或等于1.01的值，作用是讓元素放大。
變形–位移 translate()
div.box{transform: translate(50px,100px);} /* 通過(guò)translate()函數(shù)將元素向y軸下方移動(dòng)50px,x軸右方移動(dòng)100px。 */
translate我們分為三種情況：
1、translate(x,y)水平方向和垂直方向同時(shí)移動(dòng)（也就是x軸和y軸同時(shí)移動(dòng)）
2、translatex(x)僅水平方向移動(dòng)（x軸移動(dòng)）
3、translatey(y)僅垂直方向移動(dòng)（y軸移動(dòng)）
變形–矩陣 matrix ()
div.box{transform: matrix(1,0,0,1,100,100);} /* matrix() 6個(gè)屬性的意思的：第一個(gè)寬度比例1就是原大小，第二個(gè)是上下傾斜1就是2倍，2就是3倍，0就是不傾斜第三個(gè)是左右傾斜，數(shù)字和第二個(gè)一樣的意思，第四個(gè)是高度比例1就是原大小，第五個(gè)是x方向的像素位移，x方向就是左右，第六個(gè)是y方向的像素位移，x方向就是上下*/
變形–原點(diǎn) transform-origin
div.box{transform-origin: left top;transform: rotate(45deg); }
改變?cè)卦c(diǎn)到左上角，然后進(jìn)行順時(shí)旋轉(zhuǎn)45度。
（學(xué)習(xí)視頻分享：css視頻教程）