DIV 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 實現網頁水平的翻轉。