前端学习第18天：CSS3-3D-动画_css3的3d动画-CSDN博客

本文链接：https://blog.csdn.net/QAmazing/article/details/99655275

本文详细介绍了CSS3中的3D变换技术，包括3D位移、旋转、缩放及透视原理，探讨了如何利用translateZ(), rotateX(), rotateY(), rotateZ()等函数实现3D效果。同时，深入解析了CSS3动画属性，如transform, transition, animation的使用方法及它们之间的区别。

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

第18天

1. `3D`

CSS3 中的 3D 变换主要包括以下几种功能函数：

3D位移：CSS3 中的 3D 位移主要包括translateZ()和 translate3d()两个功能函数；
3D旋转：CSS3 中的 3D 旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d(1,1,0,4deg) 四个功能函数；4个参数，前三个，对应x,y,z 轴，是标示你是否希望沿着该轴旋转，是为1，不是为0，最后一个标示旋转的角度。
3D缩放：CSS3中的3D缩放主要包括scaleZ()；

1.1透视（景深）

电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。

透视可以将一个2D平面，在转换的过程当中，呈现3D效果。（没有perspective，便“没有”Z轴）

perspective 元素距离视线的距离有两种写法

- 作为一个属性，设置给父元素，作用于所有3D转换的子元素
- 作为`transform`属性的一个值，做用于元素自身

/* （物体和眼睛的距离越小，近大远小的效果越明显） */
perspective: 1200px;/*(加在父元素上)*/
transform:perspective(1200px); /*（在子元素中使用）*/

1.2左手法则

说明：伸出左手，让拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。这样我们就建立了一个左手坐标系，拇指、食指和中指分别代表X、Y、Z轴的正方向。

1.3 `3D`呈现(`transform-style`)

设置内嵌的元素在 3D 空间如何呈现，这些子元素必须为变形原素。

transform-style他主要有两个属性值：flat和preserve-3d

flat：所有子元素在 2D 平面呈现
preserve-3d：保留3D空间

2. `3D`属性详解

2.1`3D`位移

说明：在CSS3中3D位移主要包括两种函数translateZ()和translate3d()。translate3d()函数使一个元素在三维空间移动。

语法：translate3d(tx,ty,tz)了解 translateZ()函数的功能是让元素在3D空间沿Z轴进行位移。

2.2 `3D`旋转

在三维变形中，我们可以让元素在任何轴旋转。

为此，CSS3新增三个旋转函数：rotateX()、rotateY()、rotateZ()和rotate3d(x,y,z,a)。

rotateX() rotateX()函数指定一个元素围绕 X 轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕X轴顺时针旋转；反之，如果值为负值，元素围绕 X 轴逆时针旋转。
rotateY() rotateY()函数指定一个元素围绕 Y 轴旋转，旋转的量被定义为指定的角度；如果值为正值，元素围绕 Y 轴顺时针旋转；反之，如果值为负值，元素围绕 Y 轴逆时针旋转。
rotateZ() rotateZ()函数和其他两个函数功能一样的，区别在于rotateZ()函数指定一个元素围绕Z轴旋转。

3.`CSS3`动画

说明：CSS3属性中有关于制作动画的三个属性： transform,transition,animation

语法：

@keyframes mymove{
 from{初始状态属性}
    to{结束状态属性}
}
/*或*/
@keyframes mymove{
 0%{初始状态属性}
100%{结束状态属性}        /*中间再可以添加关键帧*/
}

在这里插入图片描述

3.1 动画三要素

告诉系统需要执行那个动画 animation-name:动画名

告诉系统我们需要创建一个名称叫什么的动画

@keyframes myname{
     from{初始状态属性}
    to{结束状态属性}
}

告诉系统动画持续的时长
```
div{
    animation-duration:3s; 
}
```

3.2 `animation` 和 `transition` 的区别

相同点：都是随着时间改变元素的属性值。

不同点： transition需要触发一个事件( hover 事件或 click 事件等)才会随时间改变其 css 属性；而 animation 在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素 css 的属性值，从而达到一种动画的效果，css3 的 animation 就需要明确的动画属性值。

3.3 `animation`

animation复合属性。检索或设置对象所应用的动画特效。

说明：必须与规则 @keyframes 配合使用， @keyframes mymove{} animation-name:mymove;

2.animation-duration 检索或设置对象动画的持续时间

说明：animation-duration:3s; 动画完成使用的时间为3s

animation-timing-function 检索或设置对象动画的过渡类型

说明： linear：线性过渡。 ease：平滑过渡。 ease-in：由慢到快。 ease-out：由快到慢。 ease-in-out：由慢到快再到慢。 step-start:马上跳到动画每一结束桢的状态

animation-delay 检索或设置对象动画延迟的时间

说明：animation-delay:0.5s; 动画开始前延迟的时间为 0.5s
animation-iteration-count 检索或设置对象动画的循环次数

说明： animation-iteration-count: infinite | number; infinite：无限循环 number: 循环的次数
animation-direction 检索或设置对象动画在循环中是否反向运动说明： normal：正常方向 reverse：反方向运行alternate：动画先正常运行再反方向运行，并持续交替运行 alternate-reverse：动画先反运行再正方向运行，并持续交替运行
animation-play-state 检索或设置对象动画的状态说明： animation-play-state:running | paused; running:运动paused: 暂停 animation-play-state:paused; 当鼠标经过时动画停止，鼠标移开动画继续执行