html水平翻转效果,用CSS3做一个网页水平翻转效果

有时候网站也要愚弄一下访客，比如愚人节。下面我给大家推荐个效果，就是整个页面左右颠倒了。css3 很强大，简单的几行代码就可以帮我们实现这个效果。

效果演示

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;

}

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 滤镜能实现这样的效果。如果你也想愚弄一下你的访客，不妨像美团网一样，把下面的代码加到网页中。

transform(变形)和transform-origin(变形原点)的说明：

目前这两个属性得到了除去ie以外各个主流浏览器webkit，firefox，opera的支持，属性名分别为 -webkit-transform，-moz-transform，-o-transform;

transform-origin是变形原点，也就是该元素围绕着那个点变形或旋转，该属性只有在设置了transform属性的时候起作用；

语法：-moz-transform-origin: [ | | left | center | right ][ | | top | center | bottom ] ?

transform-origin接受两个参数，它们可以是百分比，em，px等具体的值，也可以是left,center,right，或者 top,center,bottom等描述性参数 ;

更具体的用法可以参照网上其它资料吧。