在CSS3中，transform屬性應用於元素的2D或3D轉換，可以利用transform功能實現文字或影像的旋轉、縮放、傾斜、移動這4中型別的形變處理
語法：
div{ transform: none|transform-functions; }
transform屬性可以指定為關鍵字值none 或一個或多個<transform-function>值
注意：當transform有多個屬性值時要用空格隔開
屬性值：
| 描述 | |
|---|---|
| translate(x,y) | 沿著 X 和 Y 軸移動元素。 |
| translateX(n) | 沿著 X 軸移動元素。 |
| translateY(n) | 沿著 Y 軸移動元素。 |
| scale(x,y) | 縮放轉換，改變元素的寬度和高度。 |
| scaleX(n) | 縮放轉換，改變元素的寬度。 |
| scaleY(n) | 縮放轉換，改變元素的高度。 |
| rotate(angle) | 旋轉，在引數中規定角度。 |
| rotateX() | 圍繞 X 軸旋轉 |
| rotateY() | 圍繞 Y 軸旋轉 |
| skew(x-angle,y-angle) | 傾斜轉換，沿著 X 和 Y 軸。 |
| skewX(angle) | 傾斜轉換，沿著 X 軸。 |
| skewY(angle) |
下面對這些屬性值進行一一講解：
一、rotate（旋轉）
rotate(angle)通過指定的角度引數對原元素指定一個2D旋轉，angle代表旋轉角度：正值表示順時針旋轉、負值表示逆時針旋轉
單位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
轉換：弧度 = 角度*π/180
<div class="box"></div>
.box{ width: 200px; height: 200px; background-color: #B39DDB; transition: .2s; /* 過渡屬性 */ } .box:hover{ transform: rotate(30deg); /* 順時針旋轉30度 */ }
這裡用了下 css3中transition 過渡屬性，不然在形變時會很生硬
效果如下：
而 是圍繞X軸和Y軸旋轉的，上面這個案例可以看做是圍繞Z軸旋轉，大家可以腦構一下三維座標系，我們眼睛所看到螢幕的方向就可以當做Z軸
rotateX圍繞X軸旋轉：
.box:hover{ transform: rotateX(45deg); /* x軸旋轉45度 */ }
rotateY圍繞Y軸旋轉：
.box:hover{ transform: rotateY(45deg); /* Y軸旋轉45度 */ }
二、translate（位移）
translate()這個 CSS 函式在水平和/或垂直方向上重新定位元素translate(x,y)對元素同時向X軸和Y軸移動，值為負數則反方向移動
translateX()元素在X軸移動
translateY()元素在Y軸移動
下面分別演示這三個功能效果：
.box:hover{ transform: translate(40px,80px); /* 向X軸移動+40px，向y軸移動+80px */ }
效果如下：
注意：如果translate()值傳遞一個值，則預設和translateX()效果一致
translateX()元素在X軸移動
.box:hover{ transform: translateX(50px); /* 向X軸移動+50px */ }
效果如下：
translateY()元素在Y軸移動
.box:hover{ transform: translateY(50px); /* 向Y軸移動+50px */ }
效果如下：
三、scale（縮放）
CSS 函式
scale()用於修改元素的大小。可以通過向量形式定義的縮放值來放大或縮小元素，同時可以在不同的方向設定不同的縮放值
該變換通過一個二維向量確定在一個方向縮放的多少
- 當座標值處於區間 [
-1, 1]之外時，該變換將在相應的座標方向上放大該元素 - 當處在區間之中時，該變換將在相應的座標方向上縮小該元素
- 當值為1時將不進行任何處理
- 當為負數時，將進行畫素點反射之後再進行大小的修改。
語法：
scale(sx) /* or */ scale(sx,sy)
sx表示縮放向量的橫座標
sy表示縮放向量的縱座標。如果未設定，則他的預設值被設定為 sx。 從而使得元素在保持原有形狀下均等縮放
html
<div class="box">滑鼠移入放大/縮小</div>
css
.box{ width: 200px; height: 200px; background-color: #B39DDB; transition: .2s; /* 過渡屬性 */ margin: 300px auto; text-align:center; line-height:200px; } .box:hover{ transform: scale(2); /* 等同於 */ transform: scaleX(2) scaleY(2); }
設定一個值就是均等縮放，效果如下：
設定兩個值就是在X和Y兩個維度縮放並移動縮放中心，例子如下：
.box:hover{ transform: scale(2,3); }
如果設定的值在區間 [-1, 1] 之間，該變換將在相應的座標方向上縮小該元素：
.box:hover{ transform: scale(0.5); }
值為1則為元素本身大小，不進行任何變換
如果值為負數，則反向映象放大：
.box:hover{ transform: scale(-1.5); /* 映象放大 */ }
只是單獨在X軸和Y軸方向縮放元素，可以理解為scale()是它倆的複合屬性，如果只是單個方向縮放，直接使用對應函式即可：
scaleX()只在X軸方向縮放：
.box:hover{ transform: scaleX(2); /* x方向放大兩倍 */ /* or */ transform: scale(2,1); }
scaleY()只在Y軸方向縮放：
.box:hover{ transform: scaleY(2); /* Y方向放大兩倍 */ /* or */ transform: scale(1,2); }
四、skew（傾斜）
skew()函式定義了一個元素在二維平面上的傾斜轉換單位：deg(角度)、rad(弧度)、grad(梯度)、turn(圈)
轉換：弧度 = 角度*π/180
這種轉換是一種剪下對映(橫切)，它在水平和垂直方向上將單元內的每個點扭曲一定的角度。每個點的座標根據指定的角度以及到原點的距離，進行成比例的值調整；因此，一個點離原點越遠，其增加的值就越大
語法：
skew(ax) /* or */ skew(ax, ay)
ax是一個 <angle>，表示用於沿橫座標扭曲元素的角度
ay是一個 <angle>，表示用於沿縱座標扭曲元素的角度。如果未定義，則其預設值為0，導致純水平傾斜。
html
<div class="box">傾斜元素</div>
css
.box{ width: 200px; height: 200px; background-color: #B39DDB; transition: .2s; /* 過渡屬性 */ margin: 300px auto; text-align:center; line-height:200px; } .box:hover{ /* 純水平傾斜 */ transform: skew(25deg); /* or */ transform: skew(25deg,0); /* or */ transform: skewX(25deg); }
效果如下：
注意：如果值為負數，則在相反方向傾斜，比如下面這個例子：
.box:hover{ /* 負值反方向傾斜 */ transform: skew(-25deg); }
設定兩個值就是同時在X軸和Y軸上傾斜元素：
.box:hover{ /* 同時在X軸和Y軸上傾斜元素 */ transform: skew(20deg,10deg); }
.box:hover{ /* 只在X軸上傾斜元素 */ transform: skewX(30deg); }
skewY()只在Y軸方向傾斜：
.box:hover{ /* 只在Y軸上傾斜元素 */ transform: skewY(30deg); }
五、transform-origin（基點）
transform-originCSS屬性讓你更改一個元素變形的原點
語法：
/* One-value syntax */ transform-origin: 2px; transform-origin: bottom; /* x-offset | y-offset */ transform-origin: 3cm 2px; /* x-offset-keyword | y-offset */ transform-origin: left 2px;
x-offset
offset-keyword表示定義相對應的變形中心偏移
取值：
- 自定義（單位：cm、px、%）
- 關鍵詞：top、bottom、left、right、center（預設）
transform-origin屬性可以使用一個，兩個或三個值來指定，其中每個值都表示一個偏移量
栗子1：
html
<div class="box">不同基點形變</div>
css
.box{ width: 200px; height: 200px; background-color: #B39DDB; transition: .2s; /* 過渡屬性 */ margin: 300px auto; text-align:center; line-height:200px; /* 設定元素變形基點 */ transform-origin: 0 0; /* 左上角 */ /* 等同於 */ transform-origin: top left; } .box:hover{ transform: rotate(30deg); /* 旋轉 */ }
效果如下：
栗子2：
.box{ width: 200px; height: 200px; background-color: #B39DDB; transition: .2s; /* 過渡屬性 */ margin: 300px auto; text-align:center; line-height:200px; /* 設定元素變形基點 */ transform-origin: 100% -30%; } .box:hover{ transform: scale(1.7); /* 旋轉 */ }
效果如下：
栗子3：
.box{ width: 200px; height: 200px; background-color: #B39DDB; transition: .2s; /* 過渡屬性 */ margin: 300px auto; text-align:center; line-height:200px; /* 設定元素變形基點 */ transform-origin: bottom 100%; } .box:hover{ transform: skewX(50deg); }
效果如下：
六、結束語
到這裡css3中的2D形變分享到這裡，另外需要大家注意的是：如果transform有多個屬性值時需要用空格隔開，並且屬性值書寫順序的不同得到的效果也是不同的！！！
例如：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ width: 200px; height: 200px; background-color: #B39DDB; transition: .2s; /* 過渡屬性 */ margin: 300px auto; text-align:center; line-height:200px; } .box:hover{ transform: translateX(200px) rotate(30deg) skew(20deg); } </style> </head> <body> <div class="box">不同基點形變</div> </body> </html>
效果如下：
下面我們把transform的屬性值順序換一下看看效果：
.box:hover{ transform: rotate(30deg) translateX(100px) skew(20deg); }
可以看出這兩個順序不同得到的效果也是不一樣的，各個屬性值之間必須用空格分開！
本篇分享到此結束~