transform属性总结

transform的含义是：改变，使…变形；转换

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

浏览器的支持：

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

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

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

Opera 只支持 2D 转换。

2D转换方法属性：

1)translate()方法，元素从当前位置移动，根据给定的left（x坐标）和top(y坐标)位置参数；

eg:把元素从左侧移动50px，从顶端移动100px;

div{

transform:translate(50px,100px);

}

2)rotate()方法：元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转；

eg:把元素顺时针旋转30度；

div{

transfrom:rotate(30deg);

}

3)scale()方法：元素的尺寸会增加或减少，根据给定的宽度（x轴）和高度（Y轴）参数；

eg:把div的宽度转换为原始尺寸的2倍，把高度转换为原始高度的4倍；

div{

transform:scale(2,4);

}

4)skew()方法：元素翻转给定的角度，根据给定的水平线（x轴）和垂直线（Y轴）参数；

eg:围绕x轴把元素翻转30度，围绕Y轴翻转20度；

div{

transform:skew(30deg,20deg);

}

5)matrix()方法：把所有2D转换方法组合在一起，需要6个参数，包含数学函数，允许：旋转、缩放、移动以及倾斜元素。使用6个值得矩阵；

3D转换方法属性：

1）rotateX()方法：元素围绕其X轴以给定的度数进行旋转；

2）rotateY()方法：元素围绕其Y轴以给定的度数进行旋转；