【CSS 3】透過transform: rotate做出圖片、網頁傾斜的效果

之前新聞曾報導,在手機版的Google網頁裡面搜尋「傾斜」的話,得到的網頁會往右邊斜,這其實並不是很難做出來的效果,只要使用一行CSS語法就可以達到了,因為他已經是CSS 3的標準之一囉~ 目前來講這個傾斜的CSS 3語法IE系列還不支援(包含IE 9),另外就是說使用的時候不是一行就能,而是要分成很多行,因為每種瀏覽器對應的語法都不太相同,這點應該在日後會改善

前言:

今天要用到的傾斜特效源自於CSS 3中的變形功能:transform,透過這個屬性,你可以直接用CSS做出一個簡單的動畫,transform裡面除了可以把區塊傾斜以外,也可以做到:位移、縮放、透視等多種效果,不過我們今天要講的只有transform中的旋轉,也就是傾斜

語法格式:

-webkit-transform: rotate(傾斜角度);
-moz-transform: rotate(傾斜角度);
-o-transform: rotate(傾斜角度);
-ms-transform:rotate(傾斜角度)

建議要一次加入這三行,才可以讓「幾乎」所有的瀏覽器都支援,當然目前的話… IE核心的瀏覽器都還不能看到此功能(目前IE9已經支援了)

  • -webkit的那行是要給使用webkit核心的瀏覽器的語法,例如:Safari、Chrome等瀏覽器都是使用webkit
  • -moz的那行則是要給Firefox或是其他使用Firefox作為核心的瀏覽器在用的語法
  • -o的那行則是要給Opera使用的
  • -ms的那行則是要給IE 9使用的

「傾斜角度」的部份單位是deg,例如你要讓img傾斜一度,則語法為:

-webkit-transform: roate(1deg);

範例檔下載:Box.net4Shared Google Dropbox

10 thoughts on “【CSS 3】透過transform: rotate做出圖片、網頁傾斜的效果”

    1. 中看不中用…
      其實CSS本來就是拿來看的阿XD
      說Google無聊也可以啦,不過這就算是一種驚喜阿~
      傾斜這個效果比較常見在圖片應用上面

    2. 這個效果的延伸是可以拿來作旋轉動畫….
      我覺得還蠻威的阿….@@
      可是萬惡IE不死……orz

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料