1.css动画
创建一个动画：
@keyframes name{ //动画名字
0% { //动画开始
transform: translateY(0);
}
100% { //动画结束
transform: translateY(-700px) rotate(600deg);
}
}
为元素绑定动画:
animation: donghua 25s infinite linear;//参数分别为：动画名字，执行时间25秒，重复播放，匀速播放
设置动画延迟播放:
animation-delay: 11s; //11秒后播放该动画
规定动画是否在下一周期逆向播放:
animation-direction: norma1 //默认正常播放
animation-direction: alternate //反向播放
动画是否暂停播放
animation-play-state:running //正常播放
animation-play-state:paused //暂停播放
属性规定动画在播放之前或之后，其动画效果是否可见：
animation-fill-mode:none //不改变默认行为。 animation-fill-mode:forwards //当动画完成后，保持最后一个属性值（在最后一个关键帧中定义） animation-fill-mode:backwards //在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义） animation-fill-mode:both //向前和向后填充模式都被应用
定义动画循环次数：
animation-iteration-count: 10;
2.css动画过渡
transition: 2s； //意味在动画将在两秒钟内过渡完成
3.transform变换
移动元素自身的50%:
transform:transfrom(-50%，-50%) //两个参数分别代表该元素的50%高和50%宽
顺时针旋转：
transform:rotate(0deg); //会以顺时针旋转，注意此处单位为deg
放大或缩小：
transform:scale(宽的倍数,高的倍数)；
倾斜 X和Y轴的倾斜角度：
transform:skew(0deg,0deg) //两个参数分别代表为x轴和y轴
合并以上的参数，注意总共有6个值：
transform:matrix(【旋转】30deg，【缩放】2，4，【平移】2px,4px，【倾斜】30deg,30deg)
定位中心点：
transform-origin:50%,50%; //分别代表x轴和y轴
以x轴做3D旋转：
-webkit-transform: rotateX(120deg);
以y轴做3D旋转：
-webkit-transform: rotateY(130deg);
使所有的子元素在3D空间内显示(应用在父级元素)：
-webkit-transform-style: flat //2d平面
-webkit-transform-style:preserve-3d; //3d空间
距离3D元素的距离：
1.放在本身： transform: perspective(600px) rotateY(45deg); //视点都是以本身转45度 2.放在父元素 perspective: 600px; //视点是同一个父元素的视点，所以旋转效果是不同的
3D元素下边所在XY轴值(应用在父级元素)
perspective-origin: -200px -400px; // 将该元素的中心点放在x-200,y-400的位置,宽/高
设置3D元素的反面能不能可见
backface-visibility: visible //显示，可看到水平/垂直反转后的画面
backface-visibility:hidden; //隐藏，不可见，只能看见白色的内容