transform屬性可以實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。
1、2D
1）旋轉(zhuǎn)
rotate方法，定義 2D 旋轉(zhuǎn)。在參數(shù)中加入角度值，角度值后面跟表示角度單位的“deg”文字即可，旋轉(zhuǎn)方向為順時針方向。
例：transform：rotate（45deg）； 旋轉(zhuǎn)45度。
2）縮放?
scale方法來實現(xiàn)文字或圖像的縮放處理，在參數(shù)中指定縮放倍率。
例：transform：scale（0.5）；//縮小一半
可以分別指定元素的水平方向的放大倍率與垂直方向的放大倍率。
例：transform：scale（0.5，2）；//水平方向縮小一半，垂直方向放大一倍。
scaleX(x)通過設(shè)置 X 軸的值來定義縮放轉(zhuǎn)換。
scaleY(y)通過設(shè)置 Y 軸的值來定義縮放轉(zhuǎn)換。
3）傾斜?
skew方法實現(xiàn)文字或圖像的傾斜處理，在參數(shù)中分別指定水平方向上的傾斜角度與垂直方向上的傾斜角度。
例：transform：skew（30deg，30deg）；//水平方向上傾斜30度，垂直方向上傾斜30度。
skewX(angle)定義沿著 X 軸的 2D 傾斜轉(zhuǎn)換。
skewY(angle)定義沿著 Y 軸的 2D 傾斜轉(zhuǎn)換。
4）移動
translate方法來實現(xiàn)移動文字或圖像，在參數(shù)中分別指定水平方向上的移動距離與垂直方向上的移動距離。
例：transform：translate（50px，50px）；// 水平方向上移動50px，垂直方向上移動50px
只使用一個參數(shù)，省略另一個參數(shù)。這種情況下視為只在水平方向上移動，垂直方向上不移動。
translateX(x)定義轉(zhuǎn)換，只是用 X 軸的值。
translateY(y)定義轉(zhuǎn)換，只是用 Y 軸的值。
5）變形的基準(zhǔn)點
在使用transform方法進行文字或圖像變形的時候，是以元素的中心點為基準(zhǔn)點進行變形的。
transform-origin屬性可以改變變形的基準(zhǔn)點。
例：ransform：rotate（45deg）；
transform-origin：left bottom；// 把基準(zhǔn)點修改為元素的左下角
基準(zhǔn)點在元素水平方向上的位置：left、center、right；
基準(zhǔn)點在元素垂直方向上的位置：top、center、bottom。
2、3D旋轉(zhuǎn)
1）旋轉(zhuǎn)
rotate3d(x,y,z,angle) 定義 3D 旋轉(zhuǎn)。
或者分別使用rotateX方法、rotateY方法、rotateZ方法使元素圍繞X軸、Y軸、Z軸旋轉(zhuǎn)，在參數(shù)中加入角度值，角度值后面跟表示角度單位的deg文字即可，旋轉(zhuǎn)方向為順時針旋轉(zhuǎn)。
例：transform：rotate3d(x,y,z,angle)
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）縮放
scale3d(x,y,z)定義 3D 縮放轉(zhuǎn)換。
或者分別使用scaleX方法、scaleY方法、scaleZ方法使元素按X軸、Y軸、Z軸進行縮放，在參數(shù)中指定縮放倍率。
例：transform：scale3d(x,y,z)；
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軸上進行順時針方向傾斜（無skewZ方法），在參數(shù)中指定傾斜的角度。
例：transform：skewX（45deg）；
transform：skewY（45deg）；
4）移動
使用translateX方法、translateY方法、translateZ方法、使元素在X軸、Y軸、Z軸方向上進行移動，在參數(shù)中加入移動距離。
例：transform：translateX（50px）;
transform：translateY（50px）;
transform：translateZ（50px）;
