css3动画-2D转换

css3转换可以对元素进行移动、缩放、转动、拉长和拉伸

这篇博客我们来了解下2D变换方法：

· translate()

· rotate()

· scale()

· skew()

· matrix()

首先我们来先了解一下translate（）方法

translate（）方法，根据左（x轴）和顶部（y轴）位置给定的参数，从当前元素位置移动

div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}

 rotate（）方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转

div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}

scale（）方法，该元素增加或减少的大小，取决于宽度（x轴）和高度（y轴）的参数

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */

说明一下--scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。

skew（）方法，包含两个参数值，分别表示x轴y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

 matrix（）方法和2D变换方法合并成一个。，有留个参数，包含旋转，缩放，移动和倾斜功能

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

 必要的可以查看下面的图表