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

美团网2011年愚人节截图

搞怪之余，我们也可以看看他是如何实现的。蓝狮官网查看源代码能明显的看到是通过 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 滤镜能实现这样的效果。

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

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;
}
标签：愚人节, 美团网