DAY17 3D

3D形变

设置3D环境

perspective：景深

它的默认值时none
需要把景深perspective 设置3D环境的父级上
它的值可以是具体的数值，不可以时百分比，因为Z轴没有百分比，也不能时0或者负值

transform-style

设置3D效果
默认值时flat，表示2D
perserve-3D 表示3D

perspective-origin

设置透视点的位置
可以是left top right bottom center 等方位名词组合
可以时具体数值，可以是百分比

perspective-origin：X轴的位置，Y轴的位置

以上三个关于3d设置的属性都设置在3d环境的父级上

平移和旋转

平移

可以使用translated3d(x,y,z)
也可以单独使用translateZ(z)

3D旋转

1. 分开写法
   rotateX（num）:num为正，以上边为基准，上边往视窗里面翻转，num为负，上面往视窗的外面翻转
   rotateY（num）：num为正，以左边为基准，左边往窗外面翻转，num为负，左边往视窗的里面翻转
   rotateZ（num：num）
2. 合写
   rotate3d（x倍数，y倍数，z倍数，度数）
   rotate3d（1，2，3，40deg）；
   x轴旋转40度，y轴旋转80度，z轴旋转120度
   backface-visibility 查看元素从后面是否能看到元素内容
   值
   visible 默认值，能看到
   hidden 不能看到

关键帧动画

• 关键帧动画和过渡动画的区别
  1. 关键帧动画的触发时机时，只要添加关键帧动画，就会立即执行动画
  2. 关键帧动画可以对动画的流程进行控制
• 关键帧动画的使用流程
  1. 先封装一组关键帧动画，使用关键字@keyframes
  2. 给需要设置动画的元素，添加动画属性

关键帧动画的属性

1. 设置动画名称
   animation-name： 通过@keyframes 声明的名称

2. 设置动画的持续时间
   animation-duration：10s；
   以上两个属性，不能省略

3. 设置动画的运动函数
   animation-timing-function：值和过渡函数一致，都是贝塞尔曲线设置的函数

4. 设置动画的延迟时间
   animation-delay：10s；

5. 设置动画的重复次数
   animation-iteration-count：num；
   值是一个正整数，表示次数，默认是一次，也可以是infinite表示无限次

6. animation-direction：
   值
   normal 默认值，正方向运行
   alternate 当运行次数为奇数时，正方向运行，偶数是，反方向运行
   alternate-reverse 当运行次数为奇数时，反方向运行，偶数时，正方向运行

7. animation-fill-mode
   值：
   forwards 以动画最后一帧作为动画的最后呈现状态
   both 状态和forwards
   backwards 默认值
   合写
   animation：name duration timing-function delay iteration-count direction fill-mode；

控制动画的播放状态
animation-play-state
值
paused 暂停
running 运动