当前位置:园子博客 » Css » 用 CSS 实现网页的翻转效果

用 CSS 实现网页的翻转效果

4月 6th, 2011 | Filed under Css | 共有7,693次浏览

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

  1. 秦利杰
    11月 26th, 201119:10

    就这些代码就可以了啊,会不会有些浏览器不兼容的,以前我的有些在VS的编辑器上就会出问题的

  2. Ben
    7月 7th, 201120:09

    你这个边栏滚动位置还是有问题啊. 评论滚动不到位.

    • Ben
      7月 7th, 201120:10

      经测试, 是回复后滚动到自己的评论(最新评论?)那回复前的位置呢? 这个回复与否拿什么判断的? 请不吝赐教!

    • 园子
      7月 8th, 201109:32

      @Ben
      评论我设置的是阅读评论,而不是发布评论,呵呵。

  3. yesureadmin
    5月 22nd, 201115:58

    愚人节可以拿来用用

  4. 痔疮吃什么药好
    5月 19th, 201122:44

    我也看到了……整个页面都反过来了,原来就是用了这个代码哦。呵呵

  5. 济南汇众
    5月 17th, 201111:39

    确实不错

  6. 用这个拿来做淘宝客,不知道怎么样

  7. asics gel trail
    4月 16th, 201110:12

    哈哈 现在CSS很火呀!!

    • 李朋
      4月 21st, 201111:09

      确实,咱们应该多学学了。

      • 李朋
        4月 21st, 201111:09

        评论怎么提交不上去了?

  8. 今年最流行的夏装
    4月 14th, 201115:26

    很给力,哥们

  9. 美国主机
    4月 13th, 201112:41

    效果不错,现在流行CSS

  10. www.zhuna5.com住哪
    4月 12th, 201120:48

    厉害

  11. 幸运随行
    4月 9th, 201122:32

    哈哈,真神奇啊!来学习一下啦!

  12. 减肥产品排行榜
    4月 8th, 201119:06

    来学习了 谢谢分享啊

  13. 呵呵,开起来不错哟。

  14. Pavel
    4月 8th, 201117:20

    万戈童鞋很邪恶

  15. 莱步淘淘网
    4月 8th, 201116:44

    一直知道css的强大,但始终没有学好

  16. 美女111
    4月 8th, 201111:33

    这个牛了,我得好好想想让那个网页调调个!

  17. 太子虹
    4月 8th, 201111:18

    对这些真不了解,怎么说了,只能看着博主写写罢了,顶顶吧

  18. 万戈
    4月 8th, 201109:27

    HOHO,明年愚人节搞个垂直翻转

  19. wmtimes
    4月 7th, 201114:16

    CSS效果真的有些很牛的,可以省略js了都。

  20. Wordpress啦
    4月 7th, 201113:28

    这个是i比较多有技巧性的了,对于我们来说,css真是太强大了

  21. John
    4月 6th, 201123:41

    算是愚人节的一种把戏。园子,你网站没有倒过来吧?

  22. SEO论坛
    4月 6th, 201123:17

    CSS真强大,这样几句代码就可以让整个页面都反过来了

  23. Louis Han
    4月 6th, 201121:25

    明年愚人节的时候可以用以下

  24. 亿品元素
    4月 6th, 201120:44

    没啥实用价值吧???

  25. 卢松松
    4月 6th, 201117:25

    找了半天,怎么没在你这里看到效果呢?

  26. 软件盒子
    4月 6th, 201116:21

    有意思的应用

  27. akasuna
    4月 6th, 201115:32

    hoho,前几天愚人节时候有不少网站这样做了

  28. 窝头
    4月 6th, 201113:40

    这个牛了,我得好好想想让那个网页调调个!

  29. 洲河畔
    4月 6th, 201113:29

    很强大啊

  30. 宁波LED
    4月 6th, 201110:25

    我也看到了……整个页面都反过来了,原来就是用了这个代码哦。呵呵

您必须在 登录 后才能发布评论.