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

 

經過CSS3轉換，可以對元素進行移動、縮放、轉動、拉長或拉伸。它如何工做？轉換是使元素改變形狀、尺寸和位置的一種效果。CSS3轉換包括2D轉換和3D轉換，本小結咱們來了解2D變換的轉換方法。

轉換屬性包含transform和transform-origin，它們的介紹如表1：

表1  轉換屬性

 

   

 

其中，transform有五種方法，它們的方法介紹如表2：

表2  transform方法

 

 

1  translate()方法

經過translate() 位移函數，元素從其當前位置移動，根據給定的left（x座標） 和top（y座標） 位置參數。translate()方法能夠拆分爲translateX()和translateY()方法，分別對元素的left和top位置設置參數。下面經過一個實例來解釋這個方法，咱們爲img元素的left設置爲0，top設置爲0，當鼠標移入瀏覽器後，讓它相對與當前位置向下移動50px，向右移動100px，再給它設定一個過渡效果，以便讀者能夠更好的體會到translate()方法實現的效果，代碼以下：

 

該代碼的解釋爲，img圖像的left爲100px，在瀏覽器裏的執行初始效果如圖1所示：

圖1  translate()方法

 

當鼠標移入到瀏覽器後，咱們能夠發現圖片的位置發生了改變，相對於以前的位置向下移動了50px，向右移動了100px，在瀏覽器裏的執行效果如圖2所示：

圖2  translate()方法

 

2  rotate() 方法

經過rotate() 方法，元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。默認旋轉基點爲元素中心。

一樣，咱們經過一個小案例來解釋這個方法。一個html文檔裏包含一個img元素，當鼠標移入該文檔時，讓圖片旋轉180deg。代碼以下：

 

該代碼的解釋爲，img圖像初始狀態沒有旋轉過，當鼠標移入body時，圖片通過2s順時針旋轉180deg，默認的旋轉基點爲圖片中心。在瀏覽器裏的執行初始效果如圖3：

圖3  rotate旋轉

 

當鼠標移入到瀏覽器後，咱們能夠發現圖片變成了倒立的，也就是旋轉了180deg，在瀏覽器裏的執行效果如圖4：

 

圖4  rotate旋轉

 

另外，咱們還能夠爲該圖片設置旋轉基點，transform-origin屬性容許咱們改變被轉換元素的位置，2D轉換元素可以改變元素x軸和y軸。該屬性的語法爲：

transform-origin: x-axis y-axis z-axis;

該屬性默認值爲「50% 50% 0」。針對2D轉換，咱們能夠先忽略z-axis，它是針對3D轉換須要設定的值，咱們會在下一小節提到。該屬性的取值及描述如表3:

表3 轉換屬性

 

 

經過使用transform-origin來設置轉換元素的位置爲左上角。將上述案例的CSS代碼替換以下：

 

當鼠標移入到body後，咱們能夠發現圖片繞着左邊界的中心點旋轉了180deg，在瀏覽器裏的執行效果如圖5所示：

圖5 設置轉換元素的位置