CSS3中的2D转换

在CSS3中的2D转换中引入了移动、旋转、缩放、倾斜、矩阵及景深，在这主要介绍一下，移动、旋转、缩放、倾斜

2D转换所用的标签是transform ，直译的意思是变形的意思，最能体现其功能的是进行3D的转换效果，今天主要介绍其在平面状态下的变换

在2D下我们要进行元素的移动，要使用的标签是translate，其使用语法如下所示

transform: translate(120px,200px);

在其前面的值为X方向的值，第二个值为Y轴方向的值，当两个值写在一起时，他默认合并执行，在进行过渡效果展示时，会按照向量合并的方向进行移动到最终位置。

也可以进行单独的设置 translateX(),translateY()

进行元素的旋转时，主要是按照绕X轴与Y轴的方向进行旋转，其旋转的基点位置默认是在元素的中心的位置，其语法是

transform：rotateX（）；这是绕着X轴进行旋转，值为度数，单位是deg,旋转的方向的正反可以通过左手法则，大拇指指向X轴的正方向，四指弯曲的方向就是正向的旋转的方向，反之即使反方向，通过以上方法我们可以确定其在空间中的位置，这对于学习其在3D转换中的变换显得十分重要，其绕Y轴与Z轴的旋转可以以此类推。值得注意的是，当不指定旋转轴的时候，其默认的旋转轴是以Z轴进行旋转。

transform：scale（）；这是进行缩放的属性，默认的缩放中心是元素的中心，其后面的属性值是单纯的数字，初始的大小就是1，当需要进行放大时就将值设置为大于1的数，这是进行等比例的缩放，当值设置为小于的1数值时，就是进行缩小。也可以设置进行只对X轴与Y轴的缩放。

transform：skew（）；括号中的值依然为度数，默认是进行X轴的倾斜，也可以设置进行单独坐标轴的倾斜，当其后跟两个数值时是进行在X轴与Y轴相互作用下的最后结果。

值得注意的是进行复合操作时，当元素进行旋转时，其坐标轴也跟随其进行选择，所以一般操作时，要把位移属性写在首位，防止在旋转过程中，因为坐标轴的改变而导致元素的最终位置，与预期的不符。

改变元素基点的位置transform-origin

它的主要作用就是让我们在进行transform动作之前可以改变元素的基点位置。

A、transform-origin(X,Y):用来设置元素的运动的基点（参照点）。默认点是元素的中心点。其中X和Y的值可以是百分值,em,px，其中X也可以是字符参数值left,center,right；Y和X一样除了百分值外还可以设置字符值top,center,bottom。

B、transform-origin(X，Y，Z)；其中的Z轴的设置，只能是数值。