css3中新增的变形动画属性,CSS3中Transform动画属性用法详解

css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使用这三个属性可以达到很炫酷的效果。需要注意的是这三个属性都是css3新增的属性，各大浏览器支持方面还不是特别好，使用时要特别注意浏览器的兼容性，本文重点介绍Transform的使用方法，具体内容如下

浏览器支持情况：

Internet Explorer 10、Firefox、Opera 支持 transform 属性。

Internet Explorer 9 支持替代的 -ms-transform 属性(仅适用于 2D 转换)。

Safari 和 Chrome 支持替代的 -webkit-transform 属性(3D 和 2D 转换)。

Opera 只支持 2D 转换。

2D transform变换方法

•translate(x, y)方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。x, y的值可以取正负，分别表示表示向不同的方向偏移。

•rotate(angle)方法， 表示旋转angle角度。angle为正时，按顺时针角度旋转，为负值时，元素逆时针旋转。

•scale(x, y)方法，表示元素在x轴和y轴上的缩放比例，参数大于1时，元素放大，小于1时，元素缩小。

•skew(x-angle,y-angle)方法，用来对元素进行扭曲变行，第一个参数是水平方向扭曲角度，第二个参数是垂直方向扭曲角度。其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg

•matrix(n,n,n,n,n,n)方法， 以一个含六值的变换矩阵的形式指定一个2D变换，此属性值使用涉及到数学中的矩阵，感兴趣的读者可以深入了解一下，这里就不做详细介绍了。

下面是上面方法的演示：

XML/HTML Code复制内容到剪贴板

html>

transform 2D演示

#container{

width: 700px;

height: 120px;

border: 1px solid blue;

margin: 20px auto;

padding: 20px 20px;

}

#div1 ,#div2, #div3, #div4{

height: 100px;

width: 100px;

border: 1px dashed red;

display: inline-block;

}

#div1 div{

height: 100px;

width: 100px;

background: #63F7ED;

transform:translate(20px,10px);         /* W3C标准 */

-ms-transform:translate(20px,10px);     /* IE 9 */

-moz-transform:translate(20px,10px);    /* Firefox */

-webkit-transform:translate(20px,10px); /* Safari 和 Chrome */

-o-transform:translate(20px,10px);      /* Opera */

}

#div2{margin-left: 50px;}

#div2 div{

height: 100px;

width: 100px;

background: #63F7ED;

transform:rotate(45deg);        /* W3C标准 */

-ms-transform:rotate(45deg);    /* IE 9 */

-moz-transform:rotate(45deg);   /* Firefox */

-webkit-transform:rotate(45deg); /* Safari 和 Chrome */

-o-transform:rotate(45deg);         /* Opera */

}

#div3{margin-left: 100px;}

#div3 div{

height: 100px;

width: 100px;

background: #63F7ED;

transform:scale(2,0.5);         /* W3C标准 */

-ms-transform:scale(2,0.5);     /* IE 9 */

-moz-transform:scale(2,0.5);    /* Firefox */

-webkit-transform:scale(2,0.5); /* Safari 和 Chrome */

-o-transform:scale(2,0.5);      /* Opera */

}

#div4{margin-left: 100px;}

#div4 div{

height: 100px;

width: 100px;

background: #63F7ED;

transform:skew(30deg,-20deg);       /* W3C标准 */

-ms-transform:skew(30deg,-20deg);   /* IE 9 */

-moz-transform:skew(30deg,-20deg);  /* Firefox */

-webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */

-o-transform:skew(30deg,-20deg);        /* Opera */

}

translate