一、空间转换

1.空间位移：tranform： translate3d(x,y,z)

2.透视：perspacetive 一般给值(400~1200)
    pp给谁添加？给具有3d属性的盒子的最近一级父元素添加
    pp是什么意思？视距，透视，景深
    pp给了之后会实现什么效果？近大远小，近实远虚

3.transform:rotateZ()
            rotateX()   左手法则：大拇指的方向为正轴，四指为方向。
            rotateY()

4.3d 立体呈现 属性：transform-style
    transform-style给谁设置？和pp一样，具有3d属性盒子的最近一级父元素

二、动画

 @keyframes 动画名字 {
    from{}
    to{}
}

@keyframes 动画名字 {
    0%{}
    25%{}
    100%{}
}
1. 动画注意点：
   1.动画的名称不能为running，否则动画不生效；
   2.多个动画之间动画的名称不能重复;
   3.一次动画完成之后，默认会突然一下回到最初的状态
   
2.调用动画
       延迟时间：动画开始执行之前要等待的时间 s/ms
       动画播放次数：infinite 无限次播放
       动画播放方向：alternate 交替播放
       速度曲线：默认 ease； 1. linear 匀速播放，一般用在补间动画(连续的动画播放)  
       2. steps(次数)一般配合精灵图使用，用在逐帧动画，一步一步的去完成的动画；
       执行完毕时的状态：forwards 动画会停在动画结束时的状态；
       注意点：
       动画名称和播放一次动画的时长必须写，其他属性需要就写
       forwards不能和infinite结合使用，否则不生效
       animation 里面属性值 不分先后顺序
       当属性值里有两个时间，第一个时间永远表示动画时长，第二个表示等待时间/延迟时间
       animation-play-state: paused;
           暂停动画一般配合hover使用
           谁在调用动画，就给谁设置:hover 去暂停动画
       
       
 3.animation里面动画 名称 和 时长 为必写属性值。

空间转换和动画效果

一、空间转换

二、动画