css3 2D变形之transform

2013-11-17 16:16| 发布者: admin| 查看: 2331| 评论: 0

摘要: 在css3中，加入了动画功能，这使得网页效果更加炫丽和简单。我们可以用css3的2d变形属性transform制作各种2d动画，比如图像旋转、倾斜、缩放、移动等。首先认识一下css3 transform属性，transform属性的初始值是none ...

在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);

}