3D和动画属性

关于3D和动画的学习

景深

       近大远小 景深的样式

程序中实现的方法 perspective 元素距离 视线的距离（物体和眼睛的距离越小，

近大远小的效果越明显）

       属性和属性值：

perspective: 1200px;（在父元素中使用）

transform:perspective(1200px) （在子元素中使用）

3D属性

         2d场景，在屏幕上水平和垂直的交叉线x轴和y轴

3d场景，在垂直于屏幕的方法，相对于3d多出个z轴

Z轴：靠近屏幕的方向是正向，远离屏幕的方向是反向

       3D：

       形成3d空间 属性和属性值

       transform-style:preserve-3d

关于3D的位移：

       1：3D位移

              transform:translate3d(tx,ty,tz)

              transform:translateZ(t)

2：3D旋转

              transform:rotateX()

              transform:rotateY()

        transform:rotateZ()  rotate3d(x,y,z矢量值,angel)

              transform:rotate3d()

浏览器默认的空间是2d空间 设置z轴的前提条件是让浏览器形成3d空间

        属性:transform-style

        属性值

            - 默认值 flat 形成2d空间

            - 形成3d空间 preserve-3d

    位移 transform

        - translate(x,y)

        - translateX(x)

        - translateY(y)

        - translateZ(z)

        - translate3d(x,y,z)

    旋转 transform

        - rotateX()  单杠运动

        - rotateY()  钢管舞

        - rotateZ() rotate() 默认就是沿着z轴旋转

        - rotate3d(四个参数) x,y,z的矢量值 角度值

        - rotate3d(1/0,1/0,1/0,30deg)

动画的使用：

属性：

animation-name    

/* 动画的名字 */

            /* animation-name:divMove ; */

animation-duration

/* 动画运动的时间 */

            /* animation-duration: 3s; */

animation-timing-function

 /* 动画运动的方式 */

            /* animation-timing-function: linear; */

animation-delay

         动画运动前等待的时间

animation-iteration-count

/* 动画运动的次数:number/infinite 无限循环*/

            /* animation-iteration-count: infinite; */

animation-direction

  /* 方向 */

            /* animation-direction: alternate-reverse */

animation-play-state

play-state 运动状态 属性值：

paused暂停；running 运动；

     /* 简写方式 */

            animation: divMove 3s linear infinite

概括：

animation 动画的属性值 

name 名字；timing-function 运动方式；duration 运动所需要的时间；delay 运动前等待的时间；iteration-cout:infinite 运动次数及 无限循环；direction 运动的方向；play-state 运动状态 属性值：

paused暂停；running 运动；

简写方式：animation ：名字 时间 方式 次数；

step-star 不要运动过程 ，只要开始和结果。
——————————————

需求:浏览器中有一个盒子

        - 浮动

        - 定位

        - 盒模型

        - 位移

        -  

        - 动画

    关键帧动画  gif动态图

        1.需要声明帧动画

            - 在css样式表中声明

            - @keyframs 自定义的动画名字{动画的运动方式}

                - 第一种:单次运动方式 from...to

                - 第二种:多次运动方式 百分比

        2.调用动画

            - 使用动画的属性调用 - 哪个元素运动就给哪个元素添加动画

        注意:

            - 动画需要结合定位属性使用

            - 起始和结束的位置属性一定要是相同

    总结过渡和动画的区别

        - 相同点 可以控制元素在浏览器中移动

        - 不同点 过渡需要人为控制(hover) 刷新浏览器动画自动触发