CSS3中transform屬性的用法


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

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等描述性參數 ;

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM