CSS3 3D动画基础

原创于 2025-10-30 09:01:25 发布 · 664 阅读

29 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #3d #前端 #css3动画 #rotateX #translate3d #scale3d

css3 专栏收录该内容

29 篇文章

订阅专栏

文章目录

CSS3 3D动画基础

CSS3 3D动画基础

CSS3 3D动画是在2D变换基础上扩展的立体视觉效果，通过模拟真实世界的三维空间，让元素在“X/Y/Z”三个轴上产生旋转、平移、缩放等运动。掌握其基础需要理解3个核心概念：3D空间构建、3D变换函数、动画控制。下面从基础原理到代码示例逐步讲解。

一、CSS3 3D动画的核心基础概念

要实现3D效果，需先理解CSS如何模拟“三维空间”。现实世界中，我们通过“透视”感知物体的远近和立体性，CSS3通过以下属性复现这一逻辑：

1. 透视（`perspective`）：模拟人眼视角

perspective 用于定义“观察者到元素的距离”，值越小（距离越近），3D效果越强烈；值越大（距离越远），3D效果越平缓。

作用对象：通常添加到父元素上，用于“定义子元素的3D透视空间”。
语法：perspective: 数值px;（数值建议在300px~1000px之间，效果最自然）。

2. 3D空间保留（`transform-style: preserve-3d`）：关键开关

默认情况下，CSS会将子元素“扁平化”到2D平面，transform-style: preserve-3d 用于告诉浏览器：“子元素要在3D空间中布局，不要扁平化”。

作用对象：添加到父元素上，确保子元素的3D变换能在立体空间中生效。
注意：如果缺失这个属性，所有3D效果会降级为2D，这是最常见的“3D效果失效”原因。

3. 3D变换函数：控制元素在3D空间的运动

在2D变换（translate/rotate等）基础上，CSS3新增了3D专属变换函数，核心如下：

函数	作用	示例
`rotateX(角度)`	绕X轴旋转（上下翻转，类似“翻书”）	`rotateX(45deg)`（向上翻转45°）
`rotateY(角度)`	绕Y轴旋转（左右翻转，类似“开门”）	`rotateY(90deg)`（向右翻转90°）
`rotateZ(角度)`	绕Z轴旋转（平面旋转，同2D的`rotate`）	`rotateZ(30deg)`（顺时针旋转30°）
`translate3d(x,y,z)`	沿X/Y/Z轴平移（z值控制“前后”距离）	`translate3d(50px, 0, 100px)`（右移50px+前移100px）
`scale3d(x,y,z)`	沿X/Y/Z轴缩放（z值影响“厚度感”）	`scale3d(1.2, 1.2, 1.2)`（整体放大1.2倍）

X，Y，Z旋转方向图如下：
在这里插入图片描述

4. 背面可见性（`backface-visibility`）：控制翻转后背面是否显示

当元素3D旋转超过90°时，背面会朝向观察者，backface-visibility 用于控制是否显示背面：

backface-visibility: hidden;：隐藏背面（常用，如卡片翻转时避免看到反面）。
backface-visibility: visible;：显示背面（默认）。

二、基础案例：实现一个3D立方体

通过立方体案例理解上述概念的组合使用，这是3D动画的“入门标杆”。

1. HTML结构：立方体由6个面组成

<div class="cube-container"> <!-- 容器：定义透视 -->
  <div class="cube"> <!-- 立方体：保留3D空间 -->
    <div class="face front">前</div>
    <div class="face back">后</div>
    <div class="face left">左</div>
    <div class="face right">右</div>
    <div class="face top">上</div>
    <div class="face bottom">下</div>
  </div>
</div>

2. CSS样式：构建3D空间并定位6个面

/* 1. 容器：定义透视（观察者距离立方体800px） */
.cube-container {
  perspective: 800px; /* 核心：控制3D透视强度 */
  width: 200px;
  height: 200px;
  margin: 100px auto; /* 居中展示 */
}

/* 2. 立方体：保留3D空间（子元素在3D中布局） */
.cube {
  width: 100%;
  height: 100%;
  position: relative; /* 子元素绝对定位的参考 */
  transform-style: preserve-3d; /* 核心：开启3D空间 */
  animation: rotate 10s linear infinite; /* 自动旋转动画 */
}

/* 3. 统一设置6个面的基础样式 */
.face {
  position: absolute; /* 绝对定位，方便3D定位 */
  width: 200px;
  height: 200px;
  border: 2px solid #fff;
  color: white;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8; /* 半透明，方便看到重叠效果 */
}

/* 4. 3D定位6个面（核心步骤） */
.front {
  background: #ff3b30; /* 红色前面 */
  transform: translateZ(100px); /* 向前移动100px（立方体一半边长） */
}
.back {
  background: #ff9500; /* 橙色后面 */
  transform: translateZ(-100px) rotateY(180deg); /* 向后移动100px + 旋转180°（文字正向） */
}
.left {
  background: #4cd964; /* 绿色左面 */
  transform: translateX(-100px) rotateY(-90deg); /* 向左移动100px + 绕Y轴左翻90° */
}
.right {
  background: #5ac8fa; /* 蓝色右面 */
  transform: translateX(100px) rotateY(90deg); /* 向右移动100px + 绕Y轴右翻90° */
}
.top {
  background: #ffcc00; /* 黄色上面 */
  transform: translateY(-100px) rotateX(90deg); /* 向上移动100px + 绕X轴上翻90° */
}
.bottom {
  background: #007aff; /* 紫色下面 */
  transform: translateY(100px) rotateX(-90deg); /* 向下移动100px + 绕X轴下翻90° */
}

/* 5. 立方体旋转动画（让3D效果更直观） */
@keyframes rotate {
  0% {
    transform: rotateX(0) rotateY(0); /* 初始角度 */
  }
  100% {
    transform: rotateX(360deg) rotateY(360deg); /* 最终角度：绕X/Y轴各转一圈 */
  }
}

效果解析：

立方体的6个面通过translate3d（或translateX/translateY/translateZ）在3D空间中定位到前/后/左/右/上/下6个方向。
cube-container的perspective: 800px让我们看到“近大远小”的透视效果（比如正面看起来比背面大）。
cube的transform-style: preserve-3d确保6个面不会被压平，而是保持立体结构。
动画rotate让立方体持续旋转，直观展示3D空间关系。

三、3D动画基础：用`@keyframes`实现连续运动

3D动画的本质是“连续的3D变换”，通过@keyframes定义关键帧，再用animation属性控制播放。

案例：3D翻转卡片（点击/hover触发）

<div class="card-container">
  <div class="card">
    <div class="card-front">正面</div>
    <div class="card-back">背面</div>
  </div>
</div>

/* 容器：定义透视 */
.card-container {
  perspective: 1000px;
  width: 200px;
  height: 300px;
  margin: 50px auto;
  cursor: pointer; /* 提示可交互 */
}

/* 卡片：保留3D空间 + 过渡动画 */
.card {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s ease; /* 翻转时的平滑过渡 */
}

/* 正反两面：隐藏背面 */
.card-front, .card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden; /* 核心：翻转时隐藏背面 */
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.card-front {
  background: #165DFF;
  color: white;
}

.card-back {
  background: #ff3b30;
  color: white;
  transform: rotateY(180deg); /* 背面初始旋转180°（隐藏） */
}

/* hover时翻转卡片 */
.card-container:hover .card {
  transform: rotateY(180deg); /* 绕Y轴旋转180°，显示背面 */
}

效果解析：

卡片的transition: transform 0.6s ease让翻转过程平滑过渡（从0°到180°）。
backface-visibility: hidden确保翻转时不会同时看到正反两面（避免视觉混乱）。
触发方式可以是hover（如上），也可以通过JS绑定click事件动态添加transform: rotateY(180deg)。

四、基础学习注意事项

3D效果失效？检查两个核心属性：
- 父元素是否设置了transform-style: preserve-3d（没有则子元素会被扁平化）。
- 父元素是否设置了perspective（没有则3D透视效果不明显）。
变换顺序影响结果：
3D变换的顺序会改变最终效果，例如：transform: rotateY(90deg) translateZ(100px) 与 transform: translateZ(100px) rotateY(90deg) 结果不同，建议先平移再旋转。
性能优化：
大量3D动画可能导致卡顿，可通过will-change: transform告诉浏览器提前优化渲染（但不要滥用）。
兼容性：
现代浏览器（Chrome/Firefox/Safari/Edge）均支持，但旧版IE完全不支持，可通过@supports降级处理：
```
@supports not (transform-style: preserve-3d) {
  .cube { transform: none; } /* 不支持3D时禁用变换 */
}
```