让你的网页来个180°大翻转

网页平淡无奇,何不来点不一样?通过CSS的方法给网页来个水平 180 度大翻转(在愚人节那天恶搞用用也不错哦)。

来点不一样 让你的网页来个180°大翻转

给网页来个水平 180 度大翻转吧

网页翻转实现原理

通过 CSS3 的变形、变换属性 transform 实现的。虽然此属性目前暂无任何浏览器支持(包括 Firefox4、Chrome12、Opera11、IE9),但是各个浏览器都有私有属性能实现这个效果。

transform 可用于内联(inline)元素和块级(block)元素,它有几个属性值参数:

translate 位移基于 X 和 Y 坐标重新定位元素,当使用一个参数时表示 X 轴和 Y 轴的参数相同,效果类似 position:relative 。

scale 缩放可以让任一元素变大、变小。它使用一个或者两个正数和负数以及小数作为参数,当使用一个参数时表示 X 轴和 Y 轴的缩放相同。

rotate 旋转通过传递一个度数值来转动一个对象。

skew 倾斜参数是度数,当使用一个参数时表示 X 轴和 Y 轴的参数相同。

matrix 矩阵变换基于 X 和 Y 坐标重新定位元素,它使用 6 个参数。

至于 IE,虽然不支持 transform,但 IE 的 fliph 滤镜能实现这样的效果。

网页翻转实现代码

如果你想愚弄一下你的访客,那么,快快把下面的CSS代码加到网页中去吧。


html { 
        filter: fliph; /* for ie */ 
} 
body { 
        transform: rotateY(180deg); /* css3 */ 
        -moz-transform:skew(0deg, 180deg) scale(-1, 1); /* for ff */ 
        -webkit-transform: rotateY(180deg); /* for chrome and safari */ 
        -o-transform:skew(0deg, 180deg) scale(-1, 1); /* for opera */ 
        overflow-x:hidden; 
}

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址