武林網(wǎng)(www.survivalescaperooms.com)文章簡(jiǎn)介：CSS 加入到要實(shí)現(xiàn)翻轉(zhuǎn)效果的網(wǎng)頁(yè)中即可看到效果.

有時(shí)候我們需要給用戶一點(diǎn)驚喜，一些與眾不同。當(dāng)你訪問(wèn)一個(gè)網(wǎng)站的時(shí)候發(fā)現(xiàn)網(wǎng)站的整個(gè)界面都是水平翻轉(zhuǎn)過(guò)來(lái)的，會(huì)不會(huì)覺(jué)得是瀏覽器出了問(wèn)題呢？其實(shí)這種網(wǎng)頁(yè)翻轉(zhuǎn)效果通過(guò)強(qiáng)大的 css 就可以實(shí)現(xiàn)滴。

你只需要把以下的 CSS 加入到要實(shí)現(xiàn)翻轉(zhuǎn)效果的網(wǎng)頁(yè)中即可看到效果：

123456789html{filter:fliph}body{-webkit-transform: rotateY(180deg);-moz-transform-o-transformtransform

博客翻轉(zhuǎn)后的效果展示：

園子博客翻轉(zhuǎn)后的效果展示

其原理是讓 IE 瀏覽器用戶用濾鏡實(shí)現(xiàn)網(wǎng)頁(yè)的翻轉(zhuǎn)效果，非 IE 瀏覽器用戶通過(guò) CSS3 實(shí)現(xiàn)網(wǎng)頁(yè)水平的翻轉(zhuǎn)。