Categories: CSS

繼Google網頁傾斜後,我的網站也斜了!?

IE瀏覽器無法呈現此效果。Firefox為最佳效果。

最近Google行動版的傾斜網頁在台灣媒體界爭相報導之時,我的網站也不明原因的傾斜了。

在火狐中網頁已經呈現傾斜狀態,想說可能是網頁瀏覽器問題,於是打開了Chrome看看…

不料,Google大神的瀏覽器居然也是這副德行!還少了字! 那麼Opera呢?

天啊啊啊啊啊啊!我明明就沒在搜尋欄上打傾斜,我也不是手機板啊,怎麼會這樣呢???? 難道是被駭客入侵?

其實,不是駭客入侵,也跟瀏覽器沒關係(IE? 忽略XD),這是CSS3的特效語法 transform 的其中一個應用「旋轉(rotate)」。基本語法參照以下:

/*webkit適用於Chrome moz則是Firefox o則是Opera*/-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);

只要把以上這三行程式碼插入CSS語法的body標籤中,你的網頁就會整個傾斜囉!

body{
-webkit-transform: rotate(0.5deg);
-moz-transform: rotate(0.5deg);
-o-transform: rotate(0.5deg);
}

如何? 是不是很有趣呢? 你可以嘗試著把 rotate(0.5deg) 的數字部分改成任一你想要的數值去嘗試看看,當然他也能套用在其他的語法裡面,例如滑鼠移到連結上時會翻轉、移到圖片上時圖片轉動..等等,詳細動畫使用可以參考CSS: Animation Using CSS Transforms這篇文章的內容,他底下有個火箭的小小範例可以玩玩看,當然,他還有提供這範例的CSS程式碼,有興趣可以弄下來嘗試看看。

喔,對了,他文章一開始的右邊那個小方塊當你滑鼠移過去時會旋轉並放大,這也是利用CSS3達成的,這在那篇文章裡也有相關的解釋,這邊我就不多做說明了,留給客倌們嘗試看看囉~ (基本上是把程式碼複製起來然後直接實測最快 XD(被打))

duye.chen

View Comments

Share
Published by
duye.chen
Tags: CSS

Recent Posts

JavaScript – Singleton 設計模式

前言 在設計程式時,我們有時會...

8 個月 ago

PlaidML 讓你的 Mac 也能加速 Tensorflow 機器學習!

相信很多使用 Mac 或者手上...

1 年 ago

RESTful API 測試很煩,只好動手寫屬於自己的測試了

寫在最前面 嗨,大家好久不見!...

1 年 ago

Node.js 與 Socket.io – 即時聊天室實作:資料庫

經過前兩篇(一、二)文章,我們...

4 年 ago