【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.net ｜ 4Shared ｜ Google ｜ Dropbox

在〈【CSS 3】透過transform: rotate做出圖片、網頁傾斜的效果〉中有 10 則留言

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

      回覆

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

      回覆

發佈留言

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

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