首页 > 开发 > CSS > 正文

CSS有趣实例:让整个网页翻转效果

2024-07-11 09:02:04
字体:
来源:转载
供稿:网友

武林网(www.vevb.com)文章简介:CSS 加入到要实现翻转效果的网页中即可看到效果.

有时候我们需要给用户一点惊喜,一些与众不同。当你访问一个网站的时候发现网站的整个界面都是水平翻转过来的,会不会觉得是浏览器出了问题呢?其实这种网页翻转效果通过强大的 css 就可以实现滴。

你只需要把以下的 CSS 加入到要实现翻转效果的网页中即可看到效果:

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

博客翻转后的效果展示:

CSS有趣实例:让整个网页翻转效果

园子博客翻转后的效果展示

其原理是让 IE 浏览器用户用滤镜实现网页的翻转效果,非 IE 浏览器用户通过 CSS3 实现网页水平的翻转。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表