animation 动画和3D 转换

最新推荐文章于 2024-02-19 08:56:23 发布

原创最新推荐文章于 2024-02-19 08:56:23 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

css3 同时被 3 个专栏收录

4 篇文章

订阅专栏

前端开发

4 篇文章

订阅专栏

前端知识

4 篇文章

订阅专栏

本文详细介绍了CSS中的animation动画，包括定义动画函数、设置动画属性、复合写法等，并探讨了3D转换，涉及3D坐标系、3D移动、3D旋转和3D缩放的概念和用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.语法

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

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

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

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

暂停和播放
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;

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 手拇指指向要旋转的轴的正方向
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的转换