让你的网站实现水平翻转效果

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

1. translate 位移

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

2. scale 缩放

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

3. rotate 旋转

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

4. skew 倾斜

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

5. matrix 矩阵变换

   基于 X 和 Y 坐标重新定位元素，它使用 6 个参数。

至于 IE，虽然不支持 transform，但 IE 的 fliph 滤镜能实现这样的效果，之前在《用CSS滤镜制作圆角》中介绍过 fliph。

如果你也想愚弄一下你的访客，不妨像美团网一样，把下面的代码加到网页中。

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;
}

转载于:https://www.cnblogs.com/ymweb/archive/2011/04/02/2003280.html