有时候我们需要给用户一点惊喜,一些不同凡响。当你访问一个网站的时候发现网站的整个界面都是水平翻转过来的,会不会觉得是浏览器出了题目呢?实在这种网页翻转效果通过强盛的 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 实现网页水平的翻转。