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滤镜制作圆角》中介绍过 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;
}
评论