今天是愚人节，不知道大家有没有被愚弄。各大网站为了在今天显得特别，也纷纷搞怪。比如团购网站美团，来了个水平 180 度的翻转，虽然看上去怪怪的，但也算为“一成不变”的日子增加了一点乐趣，谁叫今天是愚人节呢。

搞怪之余，我们也可以看看他是如何实现的。查看源代码能明显的看到是通过 CSS3 的变形、变换属性 transform 实现的，可惜的是，这个属性还没有任何浏览器支持（包括 Firefox4、Chrome12、Opera11、IE9）,但他们却都有各自的私有属性能实现这个效果，所以几乎是在所有浏览器中打开今天的美团网，都能看到同样的效果。

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

Original article: 愚你一下 美团网翻转

©2015 一起CSS. All Rights Reserved.