学习内容： CSS3的2D转换 属性：transform 1、属性值translate translate(x,y) translateX translateY 特点 translate不会影响其他元素的位置 translate中的百分比单位指的是相对于元素自身的宽度和高度的百分比来确定的 利用2D转换试下定位盒子的水平和垂直居中，核心思想是先让盒子距离左侧50%的距离，距离顶部50%，再使用translate属性移动盒子本身高度和宽度的一半，对行内元素没有效果 2、rotate旋转角度 transform:rotate(度数) 度数为正数是顺时针旋转，度数为负数是逆时针旋转 3、2D转换中心点 transform-origin:x y;使用具体像素值时，移动的参照点是盒子的左上角 transform:right bottom; 4、缩放 transform:scale(4);宽高均放大4倍 transform:scale(2,3);宽放大2倍，高放大3倍 transform:scale(0.5，0.5);宽高均缩小0.5倍 scale缩放和宽高设置盒子大小的区别： width/height设置宽高时，上沿不动，只向下来改变宽高，会对其他的盒子有影响 scale进行缩放时，默认以盒子的中心点来进行缩放，并且不会影响其他的盒子 5、动画制作 ①概念 0%是动画的开始，100%是动画的结束，这样的规则叫动画序列 在@keyframes（关键帧）中固定CSS的样式，可以创建由当前样式转换的新样式的动画效果 可以改变任意多的样式和任意多的次数 可以使用百分比来规定变化发生的时间，或者使用"form""to"来实现，等同于0%-100% ②动画制作的步骤：定义动画、调用动画 ③动画的属性 @keyframes规定动画 animation简写属性 animation-name规定@keyframes动画的名称（必须） animation-duration规定动画万彩城一个周期需要多少秒（必须） animation-timing-function规定动画的有速度曲线，默认是ease animation-delay规定动画合适开始，默认是0 animation-iteration-count规定动画播放的次数，默认是1，infinite无限循环 animation-direction规定动画在下一周期是否逆向播放，默认是normal，alternate逆向播放 animation-play-state规定动画是否正在运行或者暂停，默认是running，paused暂停 animation-fill-mode规定动画结束后状态forwards保持，backwards回到起始 复合属性 animation:name duration timing-function delayiteration-count direction fill-mode; animation:move 5s linear 1s infinite alternate; animation:move 5s linear 1s forwards; ④动画的运动曲线 linear匀速、ease逐渐变慢、ease-in加速、ease-out减速、ease-in-out先加速后减速 步长steps()：指定了将整个动画分成多少小步来完成，如果有steps()就不需要其他的运动属性值了
| 
