3d&动画

                                                                   **3d&动画**

景深的概念

实现2d中的旋转的时候 沿着x/y轴进行翻转 用户并不能观察是向哪个方向进行翻转的

景深：远小近大 100px~1200px

两种用法

在父级元素上添加

perspective：1200px

在子级元素上添加

transfrom：perspective（1200px）

注意：给父级设置是常用的用法。

3D

浏览器默认是2d空间 学习3d需要让浏览器形成3d空间

形成3d空间的属性：transfrom-style 需要添加在父级容器上

flat 默认值 2d空间

preserve-3d 形成3d空间 多了一个z轴

3d中的位移

属性：transform

属性值：translate（）

translate（x，y）

translatex()

translatey()

新增：translatez()

新增：translate3d(x,y,z)

3d中的旋转

属性：transform

属性值：rotate（）

不去设置轴向的时候 默认是沿着Z轴

进行旋转

rotateX（）

                rotateY()
         rotateZ()
         新增:rotate3d(四个参数)
             前三个分别是xyz轴的矢量值 0/1
            第四个是角度值

动画

1.需要定义/声明帧动画

在css样式表中定义

@keyframes 关键字

@keyframes 动画的名称{动画的运动方式}

运动方式第一种：单次运动

from...to

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

 

2.调用动画

在css样式中使用动画属性

哪个元素需要运动就给哪个元素添加动画属性即可

注意：

声明动画的时候 运动状态的属性必须要一致

动画使用的时候定位属性

在声明动画完成后 调用动画的时候需要名字和动画运动时间两个属性就可以了

复合属性/简写方式

属性：animation

属性值：动画的名称 运动时间 延迟时间 运动的次数 运动的方式

总结：动画和过渡的区别

都可以控制元素运动

过渡需要人为控制（hover和target）动画