CSS3动画相关属性详解

本章，我们主要介绍，项目中我们常用，或网页上常见到的一些CSS3效果属性。
以前，我们做一些页面动画效果，是通过JS来完成的，但是JS实现一些动画并不方便，代码量增加，动画效果不稳定等情况困扰着我们。
一般来说，我把2D属性称为平面属性，3D属性，称为立体属性。
为了方便下面的属性描述，我们把应用其属性的元素，简称为项目。

一、2D效果属性

要使用这些属性，我们需要通过 transform ，并且，为了保证兼容性，我们可能还需要添加带有浏览器内核前缀的属性，比如 -webkit-transform。

1、位移属性 translate( x , y )

简单来说，我们可以认为项目处于一个XY坐标轴的原点，translate( x , y )，当x为正的时候，则项目水平（x轴）向右移动[x]距离；负则向左移动[x]距离。y为正的时候，则项目垂直（y轴）向下移动[y]，反之向上移动。
当然，我们也可以把该属性，拆分为translateX(n)，和translateY(n)，原理相同，不过一般我们还是推荐综合的写法。

代码片段

.box01{
    background: rgba(7,204,63,0.9);
}
.box02{
    background: rgba(7,204,63,0.6);
    transform: translate(100px,100px);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: translate(-100px,-100px);
}
.box04{
    background: rgba(7,204,63,0.3);
    transform: translateX(-300px);
}

---

2、旋转属性 rotate()

这个属性也很简单，比如rotate( n deg)，n是数字，deg是单位，我们可以理解为角度，0deg则不旋转。n为正时，顺时针旋转n度，反之，逆时针旋转。
而rotateX和rotateY属性，则可以归纳如3D立体效果的范畴，我们在下面再说。

.box01{
    background: rgba(7,204,63,0.6);
    transform: translate(-200px,0) rotate(-90deg);
}
.box02{
    background: rgba(7,204,63,0.9);
}
.box03{
    background: rgba(7,204,63,0.6);
    transform: translate(200px,0) rotate(45deg);
}

---

3、缩放属性 scale()

scale( x , y )，width为原有的值的 x 倍，height为原有的值的 y 倍。

.box01{
    background: rgba(7,204,63,0.9);
}
.box02{
    background: rgba(7,204,63,0.6);
    transform: scale(1.5,0.5);
}
.box03{
    background: