day15（动画 以及 3D）

一.动画
1.创建动画

a. @keyframes name{
        from{}
        to{}
        }
b. @keyframes name{
        0%{}
        50%{}
        100{}
        }

2.使用

(animation: name duration timing-function delay iteration-count direction fill-mode;)
1）动画名称
	animation-name: run;
2）动画持续时间
	animation-duration: 2s;
3）运动曲线
	animation-timing-function: linear;
	    ease:由慢到快
	    ease-in:由快到慢
	    linear:匀速
	    cubic-bezier(0.13, 0.95, 1, 1)
4）动画延迟时间
	animation-delay: 2s;
5）运动次数
	animation-iteration-count:4 ;
	    n:具体次数
	    infinite：无线循环
6）运动的方向
	animation-direction: alternate-reverse;
	    normal:默认正常方向
	    reverse:反方向运动
	    alternate:正反交替
	    alternate-reverse:反正交替
7）运动状态
	animation: run 2s linear 1s infinite alternate paused;
8）简写
	animation: run 2s linear 1s infinite alternate paused;

二.3D
1.创建3D

1）创建3D的大盒子（舞台）
    transform-style: preserve-3d;
2）旋转舞台
    transform:rotateY(75deg)

2.3D动画

1）平移
	transform:translateX()
	transform:translateY()
	transform:translateZ()
	transform:translate3d(100px,0,0)
2）旋转
	transform:rotateX()
	transform:rotateY()
	transform:rotateZ()
	transform:rotate3d(1,0,0,30deg)
3）景深（透视）：近大远小
	perspective:900p;
	取值范围一般900px-1200px，值越小出现透视效果
	创建：
	    1.给3D舞台在创建一个盒子
	    2.给盒子添加 perspective:1200px;
	    3.元素背面不可见
	        backface-visibility:hidden;