CSS3中transform属性的用法

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

view source

 

print?

01	<style type="text/css">

02

html {

03	filter: fliph; /* for ie */

04

}

05

body {

06	transform: rotateY(180deg); /* css3 */

07	-moz-transform:skew(0deg, 180deg) scale(-1, 1); /* for ff */

08	-webkit-transform: rotateY(180deg); /* for chrome and safari */

09	-o-transform:skew(0deg, 180deg) scale(-1, 1); /* for opera */

10	overflow-x:hidden;

11

}

12

</style>

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

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

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

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

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

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

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