DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS有趣實例:讓整個網頁翻轉效果
CSS有趣實例:讓整個網頁翻轉效果
編輯:CSS進階教程     

有時候我們需要給用戶一點驚喜,一些與眾不同。當你訪問一個網站的時候發現網站的整個界面都是水平翻轉過來的,會不會覺得是浏覽器出了問題呢?其實這種網頁翻轉效果通過強大的 css 就可以實現滴。

你只需要把以下的 CSS 加入到要實現翻轉效果的網頁中即可看到效果:

1
2
3
4
5
6
7
8
9
html{
    filter:fliph
}
body{
    -webkit-transform: rotateY(180deg);
    -moz-transform: skew(0deg, 180deg) scale(-1, 1);
    -o-transform: skew(0deg, 180deg) scale(-1, 1);
    transform: rotateY(180deg);
}

博客翻轉後的效果展示:

園子博客翻轉後的效果展示

園子博客翻轉後的效果展示

其原理是讓 IE 浏覽器用戶用濾鏡實現網頁的翻轉效果,非 IE 浏覽器用戶通過 CSS3 實現網頁水平的翻轉

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved