css3中的變形 transform詳解

1、變形-旋轉 ratate()函數

經過指定的角度參數使元素相對原點進行旋轉。它主要在二維空間內進行操做，設置一個角度值，用來指定旋轉的幅度。若是這個值爲正值，元素相對原點中心順時針旋轉；若是這

個值爲負值，元素相對原點中心逆時針旋轉。

transform:rotate(-20deg) 以下圖：

---

 

2、變形- 扭曲 skew()函數

扭曲skew()函數可以讓元素傾斜顯示。它能夠將一個對象以其中心位置圍繞着X軸和Y軸按照必定的角度傾斜。這與rotate()函數的旋轉不一樣，rotate()函數只是旋轉，而不會改變

元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

• 一個參數：表示水平方向的傾斜角度；
• 兩個參數：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度

分3種狀況

 transform:skewX(30deg) 以下圖：

 transform:skewY(10deg) 以下圖：

 transform:skew(-45deg) 以下圖：

 

 

---

 

3、變形-縮放 scale() 函數

讓元素根據中心原點對對象進行縮放。 scale()的取值默認的值爲1，當值設置爲0.01到0.99之間時，做用使一個元素縮小；而任何大於或等於1.01的值，做用是讓元素放大。

也分3種狀況：

transform:scale(x,y)  使元素水平方向和垂直方向同時縮放

 

transform:scale(x)  X軸縮放

 

 transform:scale(y)  Y軸縮放

 

---

 

4、變形-位移 translate() 函數

translate()函數能夠將元素向指定的方向移動，相似於position中的relative。或以簡單的理解爲，使用translate()函數，能夠把元素從原來的位置移動，而不影響在X、Y軸上

的任何Web組件。

分爲三種狀況：

transform:translate(x,y)  使元素水平方向和垂直方向同時移動

 

transform:translate(x)  使元素水平方向移動

 

transform:translate(y)  使元素垂直方向移動

 

 

---

 

5、變形-原點 transform-origin

 任何一個元素都有一箇中心點，默認狀況之下，其中心點是居於元素X軸和Y軸的50%處。以下圖所示：

在沒有重置transform-origin改變元素原點位置的狀況下，CSS變形進行的旋轉、位移、縮放，扭曲等操做都是以元素本身中心位置進行變形。但不少時候，咱們能夠經過

transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到須要的原點位置。

transform-origin取值和元素設置背景中的background-position取值相似(也能夠是具體的像素值)，以下表所示：