一、变形 transform
- transform: 通过transform，可以让元素进行移动（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）。
- transform 的时候首先要值定一个基点，围绕这个基点变换，即
transform-origin，默认值为50% 50% 0，即特别设置时，变化时围绕元素中心进行。
transform-origin: x轴参数 y轴参数 ？ z轴参数
- 旋转的时候是图形围绕基点位置顺时针旋转
.rotate { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); transform: rotate(30deg); }
#### 二、转换 transition
>transition是一个简写属性，可设置[transition-property
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-property), [transition-duration
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-duration), [transition-timing-function
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-timing-function), [transition-delay
](https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition-delay)
1. `transition-property : none | all | property;`
表示要应用的属性，初始值为 all。
2. `transition-duration`: 必须设置。
3. `transition-timing-function`:可以省略，默认值ease。
4. `transition-delay`: 可省略，默认值0。
#### 三、动画
语法：
> @keyframes <identifier> {
[ [ from | to | <百分比> ] [, from | to | <百分比> ]* block ]\*}
@keyframes 定义动画名称{ 阶段1{css样式}[ 阶段2 {css样式}...]}
只有**同时在0% 和100% 关键帧**中出现的属性才会在动画中使用; 如果没有的话，这些属性将在整个动画中使用其初始定义的值.
