day13-3d&动画

1：景深

  景深效果:远小近大 100~1200px
    两种写法
        1.添加在父级元素上 perspective: 1200px       
        2.添加在子级元素上 transform:perspective(1200px)
            - 常用的是父级写法 子级使用的时候会被覆盖
            - 景深效果在旋转中表示远小近大 离浏览器的边框是靠近用户的说明是正值

2：3d的实现

浏览器默认的空间是2d空间 只有x轴和y轴  是没有z轴的
    z轴是3d空间独有的 设置形成3d空间的属性
    形成3d空间属性:transform-style(父级元素)
        - flat 默认值 2d空间
        - preserve-3d 形成3d空间(多出一条Z轴 但是浏览器观察没有区别)

    css3 3d 中的变形属性

    1.位移属性 transform   
        - translate(X,Y) x和y进行移动
        - translateX()
        - translateY()
        - translateZ()
        - translate3d(x,y,z)

    2.旋转属性 transform
        - rotate() 不写轴向默认是Z轴
        - ratateZ() 写和不写的效果是一样 都表示z轴方向
        - rotateX()
        - rotateY()
        - rotate3d(x,y,z矢量值,角度值)
            - 开关 常用的矢量值0和1
            - 0:关闭 1:打开

3：动画的实现

关键帧动画的使用: 控制元素在浏览器中进行简单的运动
    1.声明关键帧动画
        - 属于css属性 样式表中声明
        - 使用关键字 @keyframes 动画的名称{运动方式}
            - 动画的名称需要自定义
            - 运动方式
                - 单次运动 from...to
                - 多次运动 百分百表示

    2.调用关键帧动画
        - 设置相对应的css属性
        - 哪个元素需要运动就给哪个元素添加动画属性即可
    注意:
        - 要设置定位属性
        - 设置方向的属性值一定要相同(left:0 => left:400px)

    3.动画中的属性
        - animation-name 动画的名字
        - animation-duration 动画的时间
            - ms、s
        - animation-timing-function  运动方式
        - animation-delay 延迟
        - animation-iteration-count  循环次数
            - 属性值默认为1 数字2 
            - infinite 无限循环
        - animation-direction 运动方向
            - normal 正常的 顺时针
            - reverse 反向的
        - animation-play-state  运动的状态
            - running 运动
            - paused 暂停

    4.简写方式
        - 属性:animation
        - 属性值:动画的名字 动画的时间 匀速 infinite

关键帧的定义

@keyframes mymove{

     from{初始状态属性}

    to{结束状态属性}

}

@keyframes mymove{

     0%{初始状态属性}

    50%（中间再可以添加关键帧）

    100%{结束状态属性}

}