CSS3 2D、3D转换

一、CSS3 2D转换：

CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。

2D变换的方法：translate()、rolate()、scale()、skew()、matrix()。

1、translate()方法，根据左（X轴）和顶部（Y轴）位置给定的参数，从当前元素位置移动。translate(50px，100px)是从左边元素移动50个像素，并从顶部移动100个像素。

2、rolate()方法，在一个给定度数顺时针旋转的元素，负值是元素逆时针旋转。rolate(60deg)元素顺时针旋转60度。

3、scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数。scale(2,3)转变宽度为原来的2倍大小、高度为原来的3倍大小。

4、skew()方法的语法：

transform:skew( [,]);包含两个参数，分别表示X轴和Y轴倾斜的角度。如果第二个参数为空，则默认为0，参数为负表示向相反的方向倾斜。

5、matrix()方法有六个参数，包含旋转、缩放、移动和倾斜功能。

2D转换方法：

二、CSS3 3D转换：

1、rotateX()：围绕其在一个给定度数X轴旋转。

2、rotateY()：围绕其在一个给定度数Y轴旋转。

转换属性：

3D转换方法：