CSS有趣实例:让整个网页翻转效果_建站学-个人建站指南,网页制作,网站设计,网站制作教程

建站学 - 轻松建站从此开始！

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

时间:2012-05-14 20:49来源: 作者: 点击: 次

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

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

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

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 实现网页水平的翻转。

(责任编辑：admin)

织梦二维码生成器

顶一下

(0)

踩一下

(0)

------分隔线----------------------------

上一篇：CSS3教程:Transform-变形处理
下一篇：CSS3实例教程:transitions测试学习

发表评论

最新评论 进入详细评论页>>

栏目列表

推荐内容

工信部今日发放5G商用牌照-PHP100中文网 - 中
央视快讯：工信部向中国电信、中国移动、中国联通、中国广电发放5G商用牌照。 2016年5...

热点内容

搜索

热门标签:

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