transform
transform属性可以实现元素的位移、旋转、缩放等效果
translate可以实现元素的位移
transform: translate(水平移动距离, 垂直移动距离);
rotate可以实现元素的旋转
transform: rotate(角度);
origin可以更换旋转的原点位置
方位名词（left、top、right、bottom、center） 默认原点是盒子中心点
transform-origin: 原点水平位置 原点垂直位置;
scale可以实现元素的缩放
transform: scale(缩放倍数);
scale值大于1表示放大, scale值小于1表示缩小
多重转换
transform:translate() rotate();
3D转换
transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);
盒子父元素添加 transform-style: preserve-3d;可以使子元素处于真正的3d空间
transition
transition可以添加过渡效果
W3C标准中对css3的transition这是样描述的：“css的transition允许css的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。”
transition属性的值包括以下四个：
- transition-property： 指定对HTML元素的哪个css属性进行过渡渐变处理，这个属性可以是color、width、height等各种标准的css属性。
- transition-duration：指定属性过渡的持续时间
- transition-timing-function：指定渐变的速度： 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)； 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)； 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)； 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0)； 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)； 6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。
- transition-delay：指定延迟时间，也就是经过多长时间才开始执行过渡过程。
animation
animation可以添加动画效果
实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
使用@keyframes关键字定义动画
1. 定义动画
@keyframes 动画名称{
from{}
to{}
}
2. 使用动画
animation：动画名称 动画花费时长；
