透视，视距，景深 设置给使用了3d元素的最近一级的父元素（亲爸爸） pp给谁添加？给具有3d属性的盒子的最近一级父元素添加
pp是什么意思？视距，透视，景深
pp给了之后会实现什么效果？近大远小，近实远虚
p是怎么理解的？例如 pp:800px?==>起始距离屏幕800px的地方安排一只眼睛去看屏幕 视距 pp 400px~1200px
一般作为上帝视角才会碰到 transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
perspective只是增加了近大远小的效果，并不是真正开启3d
transform-style给谁设置？和pp一样，具有3d属性盒子的最近一级父元素 3d导航栏 css：
-
{ margin: 0; padding: 0; box-sizing: border-box; }
li { /* lin */ list-style: none; }
a { /* 能够设置宽高，并且可以垂直布局 db */ display: block; width: 100px; height: 40px; color: #fff; text-decoration: none;
text-align: center; line-height: 40px;}
ul { width: 300px; margin: 100px auto; }
li { float: left;
/* 防止li旋转的时候，导致盒子往下移，所以我们要给一个固定的高度 40px */ height: 40px; /* 添加过渡 */ transition: 1s; /* 开启3d tfs */ transform-style: preserve-3d; /* 开启上帝视角，通过旋转(ps) */ /* transform: rotateX(-20deg) rotateY(30deg); */}
li a:first-child { background-color: green; /* 3.往Z轴正方向平移20px */ transform: translateZ(20px); }
li a:last-child { background-color: orange;
/* 1.往上平移60px 2.沿着X轴正方向旋转90deg */ transform: translateY(-60px) rotateX(90deg);}
li:hover { /* 4.沿着X轴负方向旋转90deg */ transform: rotateX(-90deg); }
htm：
动画注意点： 1.动画的名称不能为running，否则动画不生效；
2.多个动画之间动画的名称不能重复;
3.一次动画完成之后，默认会突然一下回到最初的状态
2.调用动画
延迟时间：动画开始执行之前要等待的时间 s/ms
动画播放次数：infinite 无限次播放
动画播放方向：alternate 交替播放
速度曲线：默认 ease； 1. linear 匀速播放，一般用在补间动画(连续的动画播放) 2. steps(次数)一般配合精灵图使用，用在逐帧动画，一步一步的去完成的动画；
执行完毕时的状态：forwards 动画会停在动画结束时的状态；
注意点：
动画名称和播放一次动画的时长必须写，其他属性需要就写
forwards不能和infinite结合使用，否则不生效
animation 里面属性值 不分先后顺序
当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
