IT兄弟連 HTML5教程 CSS3屬性特效 2D變換2

 

3  scale() 方法

經過scale() 方法，元素的尺寸會增長或減小，根據給定的寬度（X軸）和高度（Y軸）參數。縮放scale()函數讓元素根據中心原點對對象進行縮放。默認值是1，所以0.01到0.99之間的任何值，使一個元素縮小；而任何大於或等於1.01的值，讓元素顯得更大。縮放scale()和translate()函數的語法很是類似，它能夠接受一個值，也能夠同時接受兩個值，若是隻有一個值時，其第二個值默認與第一個值相等。例如：scale(1,1)元素不會有任何變化，而scale(2,2)讓元素沿X軸和Y軸放大兩倍。其語法以下：

scale(sx)

或者：

scale(sx,sy)

該函數屬性的取值及描述如表4:

表4  scale()旋轉函數屬性值及描述

   

 

一樣，咱們經過一個小案例來解釋scale方法。這裏有兩張圖片並排顯示，其中咱們爲第二張圖片對一個圖片使用scale放大1.2倍，可使用scale(1.2)，也可使用scale(1.2,1.2)，表示X軸和Y軸都放大1.2倍。代碼以下：

 

這裏，咱們展現了兩張圖片，第一張以原圖顯示，第二張被放大爲原來的1.2倍。在瀏覽器裏的執行效果如圖6：

圖6  scale縮放函數

 

若是將值設置爲「0」時，元素將消失。當咱們僅給scale()函數只顯式設置一個值時，會使對象成正比例放大或縮小。

在scale()函數中，除了能夠取正值以外，還能夠去負值。只不過取負值時，會讓元素進行翻轉，而後再進行縮放。scale()函數在對元素進行縮放時，都是以元素的中心爲基點，但能夠經過transform-origin來改變元素的基點。

 

4  skew() 方法

經過skew() 方法，元素轉動給定的角度，根據給定的水平線（X軸）和垂直線（Y軸）參數。skew()傾斜函數可以讓元素傾斜顯示。它能夠將一個對象以其中心位置圍繞着X軸和Y軸按照必定的角度傾斜。這與rotate()函數的旋轉不一樣，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。其語法以下：

 skew(ax)

或者：

skew(ax,ay)

 

該函數屬性的取值及描述如表5:

表5  skew()函數屬性值及描述

 

 

下面咱們使用一個簡單的例子來講明skew()函數。代碼以下：

 

這裏，咱們展現了兩張圖片，第一張以原圖顯示，第二張被skew()函數處理後，橫向傾斜度30deg，垂直傾斜10deg。在瀏覽器裏的執行效果如圖7所示：

圖7  skew傾斜函數

 

傾斜skew()函數和CSS3中變形中的translate()、scale()函數同樣，除了可使用skew(ax,ay)函數讓元素只在水平或者垂直方向傾斜。

skewX()：至關於skew(ax,0)和skew(ax)。按給定的角度沿X軸指定一個傾斜變形。skewX()使元素以其中心爲基點，並在水平方向（X軸）進行傾斜變形。

skewY()：至關於skew(0,ay)。按給定的角度沿Y軸指定一個傾斜變形。skewY()使元素以其中心爲基點，並在垂直方向（Y軸）進行傾斜變形。

在默認狀況下，skew()函數都是以元素的原中心點對元素進行傾斜變形。可是咱們一樣能夠根據transform-origin屬性，從新設置元素基點對元素進行傾斜變形。