animation 动画和3D 转换

1.animation 动画

1.步骤

• 1. 在css中定义动画函数
• 1. 给目标元素调用动画函数

  /*
  使用动画的步骤
  1.在css中声明动画函数
  1.1 使用关键字@keyframes+动画名 定义动画函数
  1.2 在动画函数内 定义帧动画
  0% 动画 开始 的样式
  50% 动画执行到一半的时候的样子
  100% 动画执行完毕之后的样子

  */

  /*1.声明动画函数*/
  @keyframes ani_div{
    0%{
    		width:100px;
      	background-color:red;
  	} 
    50%{
    		width:150px;
      	background-color:pink;
  	}
    100%{
  	width:300px;
      height:300px;
      background-color:yellow;
    }
  }
  

   /*
   	2. 在元素中调用动画
   	2.1 调用动画
   	2.2 定义动画的持续时间
   
   ```css
   */
   div{
     width:120px;
     height:200px;
     background-color:aqua;
     margin:100px auto;
     /*2.调用动画*/
     animation-name:ani_div;
     /*持续时间*/
     animation-duration:2s;
   }

2.语法

1. 动画名
   设置要使用的动画名 animation-name:xxx;
2. 持续时间
   设置动画播放的持续时间 animation-duration:3s
3. 速度曲线
   和设置过渡的速度曲线一样 animation-timing-function:linear;

• linear： 匀速
• ease： 慢-快-慢 默认值
• ease-in： 慢-快。
• ease-out： 快-慢。
• ease-in-out： 慢-快-慢。

4. 延迟时间
   animation-delay: 0s;
5. 循环次数
   设置动画播放的循环次数 animation-iteration-count: 2; infinite 为无限循环
6. 循环方向
   animation-direction
   如在动画中定义了 0%：红色 100%：黑色 那么 当属性值为
7. normal 默认值 红 -> 黑
8. reverse 反向运行 黑 -> 红
9. alternate 正-反-正… 红 -> 黑 -> 红…
10. alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …
11. 以上与循环次数有关
12. 动画等待或者结束的状态
    animation-fill-mode 设置动画在等待或者结束的时候的状态

• forwards：动画结束后，元素样式停留在 100% 的样式
• backwards： 在延迟等待的时间内，元素样式停留在 0% 的样式
• both： 同时设置了 forwards和backwards两个属性值

8. 暂停和播放
   animation-play-state 控制 播放 还是 暂停
   running 播放 paused 暂停

3.复合写法

   animation:name duration timing-function delay iteration-count direction fill-mode;
    /*两个时间的顺序不能改 持续的时间放前面 延迟的时间放后面 剩下 随便写*/
   animation:ani_x 2s 3 alternate linear 1s both;

2. 3D 转换

2.1. 3维坐标系

3维坐标系其实是指立体空间，立体空间是由3个轴共同组成的

• x轴 水平向右
• y轴 垂直向下
• z 轴 垂直屏幕 由屏幕里面指向屏幕的外面

2.2 3d移动translate3d

作用: 它可以改变物体在空间里面的位置和形状

3d 移动在2d移动的基础上多加了一个可以移动的方向,就是z轴方向

语法：

1. transform:translate3d(x,y,z) 其中x y z 分别指要移动的轴的方向的距离
2. transform:translateX(100px) 仅仅是移动在x轴上移动
3. transform:translateY(100px) 仅仅是移动在y轴上移动
4. transform:translateZ(100px) 仅仅是移动在Z轴上移动

注意:
因为z轴是垂直屏幕，由里指向外面 ，所以默认是看不到元素在z轴的方向上移动，想要看到，可以使用下面的视距 属性设置

2.3 3d旋转

语法

   rotate(0deg)

   rotateX(0deg)

   rotateY(0deg)

   rotateZ(0deg)

了解 !!! rotate3d(x,y,z,0deg)

旋转原点

• transform-origin:0 0;

2.4 缩放

- scale(width(宽)的倍数，height(高)的倍数)
- scaleX()
- scaleY()
- scaleZ()
- scale3d(x,y,z)

1. 左手准则:
   1 手拇指指向要旋转的轴的正方向
   2 其余的手指弯曲的方向 就是元素旋转的方向
   3d 立方体:
   1 定一个父元素 大小
   2 定子元素 -> 定宽度和高度|重叠在一起 定位
   3 对6个面开始构建 先移动再旋转 加透明度
   4 给父元素加属性 开启3d空间 | 加旋转 rotate3d(1,1,1,30deg)

3 不常用

视距

 perspective: 1000px;
 /* 视距原点 也是给被观察的物体的父元素添加 */
 /* 人站在body标签的左上角 */
 perspective-origin:0 0; 

视距原点
开启3d空间 transform-style:preserve-3d;
1 可以对一个物体同时添加移动和旋转和缩放吗??
transform:translate(0,0) rotate(0deg) scale(1,1)
2 平常我们做页面用得最多是2d的转换