首页 » 编程源码 » CSS » 浏览内容

用 CSS 实现网页的翻转效果

2012-01-28 17:03 125 0 发表评论
标签：

有时候我们需要给用户一点惊喜，一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平翻转过来的，会不会觉得是浏览器出了问题呢？其实这种网页翻转效果通过强大的 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 实现网页水平的翻转。再次感叹下 CSS 的强大魅力，我是得多学学了。

评论 共0条 (RSS 2.0) 发表评论

  1. 暂无评论，快抢沙发吧。

发表评论

  •   想要显示头像？
回到页首