CSS3變形指的是利用transform屬性對元素進行旋轉、扭曲、縮放、位移、矩陣、原點等類型的變形處理；元素的變形操作需要配合使用rotate()、skew()、scale ()、translate()、matrix()等函數來實作。
本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
什麼是css3變形
在CSS3中，可以利用transform功能來實現文字或影像的旋轉、扭曲、縮放、位移、矩陣、原點這六種類型的變形處理，以下將詳細講解transform的使用。
變形--旋轉rotate()
div.box{transform: rotate(45deg);} /*顺时针旋转45度*/變形--扭曲skew()
div.box{transform:skew(45deg);}
/*通过skew（）函数将长方形变成平行四边形。*/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()函数将元素向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就是不倾斜
第三个是左右倾斜，数字和第二个一样的意思，
第四个是高度比例1就是原大小，
第五个是X方向的像素位移，X方向就是左右，
第六个是Y方向的像素位移，X方向就是上下
*/變形--原點transform-origin
div.box{transform-origin: left top;transform: rotate(45deg); }改變元素原點到左上角，然後進行順時旋轉45度。
（學習影片分享：css影片教學）
以上是CSS3變形是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
