有時候網站也要愚弄一下訪客,比如愚人節。下面我給大家推薦個效果,就是整個頁面左右顛倒了。css3 很強大,簡單的幾行代碼就可以幫我們實現這個效果。
01 |
<style type= "text/css" > |
06 |
transform: rotateY( 180 deg); |
07 |
-moz-transform:skew( 0 deg, 180 deg) scale( -1 , 1 ); |
08 |
-webkit-transform: rotateY( 180 deg); |
09 |
-o-transform:skew( 0 deg, 180 deg) scale( -1 , 1 ); |
transform 可用於內聯(inline)元素和塊級(block)元素,它有幾個屬性值參數:
- translate 位移:基於 X 和 Y 坐標重新定位元素,當使用一個參數時表示 X 軸和 Y 軸的參數相同,效果類似 position:relative 。
- scale 縮放:可以讓任一元素變大、變小。它使用一個或者兩個正數和負數以及小數作為參數,當使用一個參數時表示 X 軸和 Y 軸的縮放相同。
- rotate 旋轉:通過傳遞一個度數值來轉動一個對象。
- skew 傾斜:參數是度數,當使用一個參數時表示 X 軸和 Y 軸的參數相同。
- 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等描述性參數 ;
更具體的用法可以參照網上其它資料吧。