3D转换的位移、旋转、缩放以及动画如何执行暂停等

3D转换

        视距：给父元素加
            perspective：2000px；模拟人眼到物体的距离，以便能观察到比较明显的3d效果-进大远小

###显示3D效果 transform-style: preserve-3d;

        1、位移
            transform:translateZ();z轴方向移动
            transform:translate3d(100px,200px,300px);xyz轴同时移动
相同写法：   transform:translateX(100px) translateY(100px) translateZ(100px);xyz轴同时移动


        2、旋转
        transform:rotateX(); 绕x轴旋转
        transform:rotateY(); 绕y轴旋转
        transform:rotateZ(); 绕z轴旋转
        矢量方法：
            transform:rotate3d(1,1,0,30deg);
            transform:rotate3d(1,0,0,30deg); x轴旋转
        3、缩放
        transform:scaleZ();



动画
    动画可以实现两个或者三个及以上的状态
    0%{}或者from{}=0%        to{}=100%
    1、定义动画
            @keyframes 动画名称{
                0%{
                    background：red
                }
                50%{
                    background：blue;
                }
                100%{
                    background：yellow;
                }
            }
    2、执行动画(给本身元素添加)
            animation：动画名称 执行时间 速度效果 延迟时间 次数 是否反向;
                次数：infinite 无限执行
                是否反向：alternate 反向
    3、暂停动画
            animation-play-state:paused;