CSS3中transform屬性的用法

有時候網站也要愚弄一下訪客，比如愚人節。下面我給大家推薦個效果，就是整個頁面左右顛倒了。css3 很強大，簡單的幾行代碼就可以幫我們實現這個效果。

view source

 

print ?

01	<style type="text/css">

02

html {

03	filter: fliph; /* for ie */

04

}

05

body {

06	transform: rotateY(180deg); /* css3 */

07	-moz-transform:skew(0deg, 180deg) scale(-1, 1); /* for ff */

08	-webkit-transform: rotateY(180deg); /* for chrome and safari */

09	-o-transform:skew(0deg, 180deg) scale(-1, 1); /* for opera */

10	overflow-x:hidden;

11

}

12

</style>

transform 可用於內聯(inline)元素和塊級(block)元素，它有幾個屬性值參數：

1. translate 位移：基於 X 和 Y 坐標重新定位元素，當使用一個參數時表示 X 軸和 Y 軸的參數相同，效果類似 position:relative 。
2. scale 縮放：可以讓任一元素變大、變小。它使用一個或者兩個正數和負數以及小數作為參數，當使用一個參數時表示 X 軸和 Y 軸的縮放相同。
3. rotate 旋轉：通過傳遞一個度數值來轉動一個對象。
   
4. skew 傾斜：參數是度數，當使用一個參數時表示 X 軸和 Y 軸的參數相同。
5. matrix 矩陣變換：基於 X 和 Y 坐標重新定位元素，它使用 6 個參數。

至於 IE，雖然不支持 transform，但 IE 的 fliph 濾鏡能實現這樣的效果。如果你也想愚弄一下你的訪客，不妨像美團網一樣，把下面的代碼加到網頁中。

transform(變形)和transform-origin(變形原點)的說明：

目前這兩個屬性得到了除去ie以外各個主流瀏覽器webkit，firefox，opera的支持，屬性名分別為 -webkit-transform，-moz-transform，-o-transform;

transform-origin是變形原點，也就是該元素圍繞着那個點變形或旋轉，該屬性只有在設置了transform屬性的時候起作用；

語法：-moz-transform-origin: [ <percentage> | <length> | left | center | right ][ <percentage> | <length> | top | center | bottom ] ?

transform-origin接受兩個參數，它們可以是百分比，em，px等具體的值，也可以是left,center,right，或者 top,center,bottom等描述性參數 ;

更具體的用法可以參照網上其它資料吧。