html中2d变形兼容性,css3 2D变形之transform

在css3中，加入了动画功能，这使得网页效果更加炫丽和简单。我们可以用css3的2d变形属性transform制作各种2d动画，比如图像旋转、倾斜、缩放、移动等。

首先认识一下css3 transform属性，transform属性的初始值是none，适用于块元素和行内元素。

transform的取值如下：

translate([, ])：

移动元素对象，基于X和Y坐标移动重新定位元素。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

translateX()：指定对象X轴(水平方向)的平移

translateY()：指定对象Y轴(垂直方向)的平移

rotate()

旋转元素对象，即指定对象的2D旋转，按照 ransform-origin 属性的定义为基点，默认为 center,center。

允许传递的是一个度数值来进行元素的转动；这个度数值可以取正值也可以取负值，在这里，正值代表顺时针旋转，负值代表逆时针旋转，在这里通过指定的角度参数对元素指定一个2Droation(2D旋转)，但是需要有trans-origin属性的定义。trans-origin定义的是旋转的基点，常见的写法为：transform:rotate(30deg);表示顺时针旋转30度；

scale([, ])

缩放元素对象，即指定对象的2D缩放。

第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认取第一个参数的值。

它使用一个或者两个正数和负数以及小数做为参数；两参数的含义：依次x轴缩放和y轴缩放，正数代表放大，负数代表缩小，当使用小数时，大于1代表放大，小于1代表缩小，当使用一个参数时表示x轴和y轴缩放相同；

scale()方法具有三种情况：

scale(x,y)使元素水平方向和垂直方向同时缩放(也就是x轴和y轴同时缩放)；

scaleX(x)元素仅水平方向缩放(x轴缩放)；

scaleY(y)元素仅垂直方向缩放(y轴缩放)，这里要注意的是：这三个方法具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，值大于1元素放大，值小于1，元素则缩小。

scaleX()：指定对象X轴的(水平方向)缩放

scaleY()：指定对象Y轴的(垂直方向)缩放

skew( [, ])

倾斜元素对象，即指定对象斜切扭曲。第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则默认值为0

skewX()：指定对象X轴的(水平方向)扭曲

skewY()：指定对象Y轴的(垂直方向)扭曲

matrix(,,,,,)：

定义矩阵变换，即以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换，相当于直接应用一个[a,b,c,d,e,f]变换矩阵。

下面通过一个简单的示例，让大家更好的理解css3 2D transform属性。

在本示例中，鼠标经过图像时div元素会放大并旋转，移开鼠标后又恢复原来的效果。

css样式代码如下：

div {

margin:100px 0;

width: 400px;

height: 100px;

background:url(images/bg1.jpg) center;

}

div:hover {

/* 定义动画的状态 */

-webkit-transform: rotate(-90deg);

-moz-transform: rotate(-90deg);

-o-transform: rotate(-90deg);

-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}