在CSS的世界里，存在着多种能体现动画效果的属性：CSS transform、CSS Transition 和 CSS Animation。让开始接触CSS的同学感到困惑。要搞清楚CSS的动画，我们就必须先把这几种属性做一下区别。
CSS transform 属性、CSS Transition 属性、 CSS Animation 属性的区别
CSS transform （形变）CSS transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
CSS Transition （过渡）很多网站都把这个属性翻译成过渡，也有人把它翻译成 补间。为什么这样呢？因为它的原理是：设置关键帧的初始状态，然后在另一个关键帧改变这个状态，比如大小、颜色、透明度、位置等，浏览器将自动根据二者之间帧的值创建的过渡效果。这明显动起来的东西，W3C并不认为它是动画。大概因为它无法管理过渡的中间过程。
CSS Animation（动画）我私下觉得，这个可能才是W3C组织在定义CSS规则时候认可的动画，采用关键帧方式创建和管理动画，甚至可以完全控制每一段动画的表现。它既可以实现 补间动画 的动画效果，也可以使其以 逐帧动画 的方式进行绘制。
现在，我们总结一下上述三种动画的区别：transform形变 和 Transition过渡，都是不必通过 @keyframes 创建的。我们可以通过它们改变CSS元素的样式，使他们看上去变化甚至运动起来。而 Animation（关键帧动画），是CSS最核心的动画属性。
接下来，让我们通过实例，一步步去详细了解这三种属性。
CSS transform （形变）
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
提供了一些css 函数来进行使用
- 平移：translate(x, y)
- 缩放：scale(x, y)
- 旋转：rotate(deg)
- 倾斜：skew(deg, deg)
CSS transform 语法：
transform: none|transform-functions;transform 可以设置多个函数组合用空格隔开，举个例子
transform: translate(-50%,-50%) scale(0.5) rotate(45deg);上述代码的作用：沿x轴(向左)，Y轴(向上)平移div的位置为自身高度和宽度的50%（使得div与其父元素的中心点重合，实现垂直居中对齐），同时，缩小div的大小为原来的50%，并且顺时针旋转45deg。
我们通过一张平面直角坐标系的图，更容易理解2D转换。请你在学习2d转换的过程中，牢牢记住这张图。
现在，你已经掌握了 transform 的基本语法。现在我们看一看它的具体应用。
CSS 2D 转换
CSS 2D转换属性
| transform |
向元素应用 2D 或 3D 转换。 |
| transform-origin |
允许你改变被转换元素的位置。 |
使用 CSS transform 属性，你可以使用下面这些2D 转换方法：translate()、rotate()、scaleX()、scaleY()、scale()、skewX()、skewY()、skew()、matrix()
translate() 方法
translate() 方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）。
.box{
background: #ffc;
width: 100px;
height: 100px;
border:1px solid #000;
box-sizing: border-box;
cursor: pointer;
}
.box:hover{
transform: translate(100px);
}
上面的例子，我们先定义了一个div，让鼠标悬浮到div上面时，这个div将发生移动：从其当前位置向右移动100 像素。
效果虽然很简陋，但这就是这行代码产生的效果。此外，还可以使用translateX()和translateY()分别控制元素在X轴和Y轴上的移动，你也可以通过下面这样的代码，将元素向右移动100px并向下移动200px。
transform: translate(100px, 200px)rotate() 方法
rotate() 方法根据给定的角度顺时针或逆时针旋转元素。
下面的例子把 div 元素顺时针旋转 20 度（使用负值将逆时针旋转元素。）：
.box:hover{ transform: rotate(20deg);/* 顺时针旋转 */ }
通过上述案例，我们可以知道，div静止的初始角度为0，旋转的中心是div的中心。那么，若你将角度设置为360deg，你猜猜会发生什么？
scale() 方法
scale() 方法增加或减少元素的大小（根据给定的宽度和高度参数）。
下面的例子把 div 元素增大为其原始宽度的两倍和其原始高度的三倍：
.box:hover{ transform: scale(2, 3); }
通过上面案例，你是否发现，放大缩小的中心点也是原来div元素的中心点。
scaleX() 方法
scaleX() 方法增加或减少元素的宽度。让我们想想，如果我要将宽度增加原来的div宽度的一倍，应该怎么写呢？100% 还是200%？
.box:hover{ transform: scaleX(2); /* transform: scaleX(200%); */ }
经过测试，我们发现
transform: scaleX(2); 与
transform: scaleX(200%);的效果是一样的。这说明，scaleX()方法，与大多数 CSS方法一样，同时支持 百分比写法。
scaleY() 方法
scaleY() 方法增加或减少元素的高度。
下面的例子把 div 元素增大到其原始高度的三倍：
.box:hover{ transform: scaleY(3); }
skewX() 方法
skewX() 方法使元素沿 X 轴 倾斜 给定角度。
下例把 div 元素沿X轴倾斜 20 度：
.box:hover{ transform: skewX(20deg); }能想象出倾斜是什么样子吗？
skewY() 方法
skewY() 方法使元素沿 Y 轴倾斜给定角度。
下例把 div 元素沿 Y 轴倾斜 20 度：
.box:hover{ transform: skewY(20deg); }
skew() 方法
skew() 方法使元素沿 X 和 Y 轴倾斜给定角度。
下面的例子使 div 元素沿 X 轴倾斜 20 度，同时沿 Y 轴倾斜 10 度：
.box:hover{ transform: skew(20deg,10deg); }
需要提醒注意的是，如果你使用 skew()方法时，仅写了一个值。如下：
.box:hover{ transform: skew(20deg); }你猜猜会发生什么？会是X轴，Y轴同时倾斜20度吗？哈哈，想太多了 ！ W3C告诉你：如果未指定第二个参数，则值为零。因此，上面例子只能 使 div 元素沿 X 轴倾斜 20 度：
matrix() 方法
matrix() 方法把所有 2D 变换方法组合为一个。matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。
参数如下：
matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())我们不做多解释，先举个例子：
.box:hover{ transform: matrix(2, -0.3, 0, 1, 10, 50); }
好了，基本的2D变换属性都学完了。下面列表是对2D转换方法的总结：
| 函数 |
描述 |
| matrix(n,n,n,n,n,n) |
定义 2D 转换，使用六个值的矩阵。 |
| translate(x,y) |
定义 2D 转换，沿着 X 和 Y 轴移动元素。 |
| translateX(n) |
定义 2D 转换，沿着 X 轴移动元素。 |
| translateY(n) |
定义 2D 转换，沿着 Y 轴移动元素。 |
| scale(x,y) |
定义 2D 缩放转换，改变元素的宽度和高度。 |
| scaleX(n) |
定义 2D 缩放转换，改变元素的宽度。 |
| scaleY(n) |
定义 2D 缩放转换，改变元素的高度。 |
| rotate(angle) |
定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) |
定义 2D 倾斜转换，沿着 X 和 Y 轴。 |
| skewX(angle) |
定义 2D 倾斜转换，沿着 X 轴。 |
| skewY(angle) |
定义 2D 倾斜转换，沿着 Y 轴。 |
CSS 3D 转换
什么是3D转换，它和2D转换有什么不同？
我用一副图回答你！
看明白了吧。3D的转换，多了一个维度。下面是上述两个div的转换代码：
.box:hover{
transform: rotate(360deg);/* 2D */
}
.box2:hover{
transform: rotateX(360deg);/* 3D */
}同样是360度旋转，却产生了不同的效果。2D，就永远停留在屏幕的这个平面维度上。
CSS 3D 转换属性
下表列出了所有 3D 变换属性：
| 属性 |
描述 |
支持 |
| transform |
向元素应用 2D 或 3D 转换。 |
2D，3D |
| transform-origin |
允许你改变被转换元素的位置。 |
2D，3D |
| transform-style |
规定被嵌套元素如何在 3D 空间中显示。 |
3D |
| perspective |
规定 3D 元素的透视效果。 |
3D |
| perspective-origin |
规定 3D 元素的底部位置。 |
3D |
| backface-visibility |
定义元素在不面对屏幕时是否可见。 |
3D |
对比2D的转换属性，我们可以看到。3D转换新增了几个转换属性。后面我们在做讨论。现在让我们先把重点放到转换方法上。
通过 CSS transform 属性，您可以使用以下 3D 转换方法：rotateX()、rotateY()、rotateZ()。
rotateX()方法
rotateX() 方法使元素绕其 X 轴旋转给定角度：
.box2:hover{ transform: rotateX(360deg);/* 3D */ }
rotateY()方法
rotateY() 方法使元素绕其 Y 轴旋转给定角度：
.box2:hover{ transform: rotateY(360deg);/* 3D */ }
rotateZ()方法
rotateZ() 方法使元素绕其 Z 轴旋转给定角度：
.box2:hover{ transform: rotateZ(360deg);/* 3D */ }
意外吧？rotateZ 居然跟 rotate得到了同样的结果，为什么这样呢？其实，当你把X轴，Y轴，Z轴的空间感建立之后，你就明白了。如果X轴是平行与我们的浏览器屏幕的水平方向，Y轴是平行于浏览器的垂直方向，那么Z轴呢？它是垂直于屏幕的一条轴。所以，rotateZ理所当然的就是围绕z轴为中心在旋转了。它已经脱离了二维的平面。
参考上图，可以很好的理解CSS3D
