css动画2D.3D的转换

1、通过CSS3转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸

转换是使元素改变形状、尺寸和位置的一种效果

  可以使用2D, 3D来转换元素

2, 2D转换方法:

###translate():使元素移动
有两个参数，x和y，x表示水平方向的移动，y表示垂直方向的移动
例如: transfrom:translate(100px,100px):

rotate()：旋转

例子：transfrom:rotate(180deg):
deg 是一个度数单位必须写的

scale()：缩放

例子：transfeom:scale(1,2);
有两个参数，第一个是宽度倍数的缩放 1表示不变 ，第二个是高度倍数的缩放 2 表示2倍

skew()：倾斜

例子：transfrom:skew(50deg,50deg);
有两个参数，第一个是x轴方向的倾斜，第二个是y轴方向的倾斜

transform-origin：其默认值为 transform 元素的中心点，即 50% 50% ；

可以改变这个属性的值，从而改变变换的中心点。

matrix()

接收 6 个参数：a、b、c、d、e、f（不常用）
效果：效果演示

3, 3D转换方法:

  rotateX()
  rotateY()