HTML如何制作3D效果？CSS3的transform怎么用？

星降

发布时间：2025-08-08 14:52:01

684人浏览过

来源于php中文网

原创

要制作css 3d效果，核心是使用css3的transform属性配合perspective和transform-style: preserve-3d；1. 定义透视（perspective）来设定观察距离，值越小透视越强，值越大越接近正交投影；2. 在3d容器上设置transform-style: preserve-3d，使子元素能在独立的3d空间中变换而不被扁平化；3. 使用rotatex/y/z、translatez等函数对子元素进行3d变换，构建立体结构；4. 通过transform-origin调整旋转轴心，实现如门绕铰链转动等真实效果；5. 利用transition实现交互式3d动画，如hover翻转卡片；6. 使用@keyframes结合animation创建自动播放的复杂3d动画，如持续旋转的立方体；7. 注意性能优化，优先使用translatez、启用gpu加速，并可结合javascript实现动态交互，最终实现流畅且具有深度感的3d视觉效果。

HTML如何制作3D效果？CSS3的transform怎么用？

HTML本身不直接“制作”3D效果，它提供的是内容的结构骨架。真正赋予网页元素立体感和空间深度的，是CSS3的

transform

属性。通过巧妙运用

perspective

、

transform-style: preserve-3d

以及各种

rotate

、

translateZ

等函数，我们就能让原本平面的元素在视觉上呈现出三维效果。

解决方案

要用CSS3

transform

来制作3D效果，核心思路是创建一个3D场景，然后将元素放置并变换在这个场景中。

定义透视（Perspective）：这是关键的第一步，它决定了你的3D场景有多“深”，以及用户从多远的地方观看。通常，
```
perspective
```
属性会应用在3D容器的父元素上。它的值越小，透视效果越强烈，元素看起来会更“扭曲”；值越大，透视效果越弱，看起来更像正交投影。

立即学习“前端免费学习笔记（深入）”；
```
.container {
    perspective: 1000px; /* 定义透视深度 */
    /* 或者 perspective-origin: center center; 调整视点 */
}
```
启用3D空间（
```
transform-style: preserve-3d
```
）：如果你想让一个元素的子元素也能在3D空间中进行独立的3D变换（而不是扁平地贴在父元素上），那么这个父元素（即3D容器）就需要设置
```
transform-style: preserve-3d;
```
。这告诉浏览器，这个元素的所有子元素都应该在它们各自的3D平面上渲染，而不是被扁平化。
```
.cube-wrapper {
    perspective: 800px;
    transform-style: preserve-3d; /* 关键，让子元素也能在3D空间里变换 */
}
```

应用3D变换（

transform

函数）：现在，你可以对3D容器内的子元素应用各种

transform

函数了。

```
rotateX(angle)
```
：绕X轴旋转，元素会上下翻转。
```
rotateY(angle)
```
：绕Y轴旋转，元素会左右翻转。
```
rotateZ(angle)
```
：绕Z轴旋转，元素会平面旋转。
```
translateZ(distance)
```
：沿着Z轴移动，元素会离你更近（正值）或更远（负值）。这是制造深度感最直接的方式。
```
scaleZ(factor)
```
：沿着Z轴缩放，虽然视觉效果不明显，但在一些复杂变换中可能有用。

例如，制作一个简单的立方体面：

.cube-wrapper {
    width: 200px;
    height: 200px;
    position: relative;
    margin: 100px auto;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 0, 0, 0.7);
    border: 1px solid #333;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2em;
    color: white;
}

.front  { transform: rotateY(0deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); } /* 注意，背面需要旋转180度，然后平移 */
/* ...其他面类似，根据需要旋转和translateZ */

通过这些组合，你就可以让平面元素在三维空间中“动”起来。

CSS 3D中的

perspective

到底是个啥？它和透视效果有啥关系？

说实话，刚开始接触CSS 3D，最让人头疼的可能就是

perspective

这个概念了。它不是一个直接的变换函数，而是定义了一个3D场景的“视点”或者说“焦距”。你可以把它想象成你眼睛到屏幕的距离。

perspective

属性通常应用在3D变换元素的父容器上。它的值是一个长度单位（比如

px

），代表了从观察者到Z=0平面的距离。这个距离决定了元素在Z轴上移动时，视觉上缩放的程度。

值越小（比如100px）：观察者离得很近，透视效果会非常强烈。Z轴上的微小移动都会导致元素看起来有很大的缩放变化，远处的元素会急剧缩小，近处的元素会急剧放大，整个场景会显得很“扭曲”，像鱼眼镜头看出去的效果。这种效果在需要强调深度或者制造戏剧性效果时很有用，但用不好容易显得不自然。
值越大（比如2000px甚至更高）：观察者离得很远，透视效果会变得很弱。Z轴上的移动对元素缩放的影响不那么明显，场景看起来会更“扁平”，接近于正交投影（也就是没有透视的投影，比如建筑图纸的立面图）。这对于需要保持元素相对大小不变的场景比较合适，比如一些UI组件的微3D效果。

我个人觉得，理解

perspective

的关键在于，它设定了一个“消失点”和“景深”。没有

perspective

，所有的

translateZ

、

rotateX/Y

等3D变换，都只会看起来像2D的缩放或旋转，因为浏览器不知道如何模拟“近大远小”的透视效果。有了它，元素在Z轴上的位置变化才会被正确地“渲染”出深度感。

图可丽批量抠图

用AI技术提高数据生产力，让美好事物更容易被发现

下载

如何让嵌套的HTML元素也能在CSS 3D空间里“立体”起来？

transform-style

和

transform-origin

怎么配合？

这真的是一个非常常见的问题，也是很多人在尝试复杂CSS 3D效果时遇到的“拦路虎”。核心在于理解

transform-style: preserve-3d

和

transform-origin

这两个属性的协同作用。

首先，

transform-style: preserve-3d

是让嵌套元素在3D空间中保持其独立性的“通行证”。默认情况下，当一个父元素应用了3D变换后，它的子元素会被“扁平化”到父元素的2D平面上。这意味着，如果你给一个

div

加了

rotateY(45deg)

，它的子

div

会跟着一起旋转，但子

div

本身不会在它自己的3D空间里进行变换。

当你给父元素设置了

transform-style: preserve-3d

时，你实际上是告诉浏览器：“嘿，这个父元素内部的子元素，也要在各自的3D空间里进行变换，不要把它们都压平了！”这样，子元素就可以拥有自己的3D上下文，可以独立地进行

rotateX/Y/Z

、

translateZ

等操作，并且这些操作会基于父元素的3D变换继续累加。比如，做一个3D相册，每张照片都在一个旋转的立方体面上，就需要这个属性来保证照片本身也能独立旋转。

然后是

transform-origin

。这个属性在2D变换中就存在，它定义了元素进行变换（旋转、缩放等）的原点。在3D空间里，它的作用同样重要，甚至更关键。

transform-origin

默认是元素的中心点（

50% 50% 0

），也就是

transform

操作的轴心。

想象一下你要旋转一个门。如果旋转原点在门的中心，那门会原地打转。但如果旋转原点在门的一侧（比如

0% 50%

或

left center

），门就会像真实世界那样，以铰链为轴心打开或关闭。

在复杂的3D场景中，比如你要制作一个翻转的卡片，卡片需要绕着它的一条边进行翻转，这时你就需要将

transform-origin

设置为那条边。例如，

transform-origin: 0% 50%

（或

left center

）表示围绕左边进行旋转。如果你要让一个立方体绕着某个特定的轴心旋转，而这个轴心不在立方体中心，那么调整

transform-origin

就必不可少了。

总结一下，

transform-style: preserve-3d

为子元素开启了独立的3D舞台，而

transform-origin

则精确地定义了这些元素在舞台上“表演”时的重心或轴心。两者结合，才能构建出复杂且符合预期的3D结构和动画。

除了静态的3D效果，怎么用CSS实现更流畅、更复杂的3D动画？

静态的3D效果固然能带来视觉冲击，但真正让用户感到惊艳的，往往是那些流畅、自然的3D动画。CSS实现3D动画主要依赖于

transition

和

@keyframes

结合

animation

属性。

利用

transition

实现简单的交互式3D动画：

transition

属性用于定义元素属性从一个值到另一个值的平滑过渡。这对于响应用户交互（如

hover

、

focus

等）的3D效果非常有用。比如，制作一个鼠标悬停时翻转的卡片：


    
        正面
        背面

.card-container {
    perspective: 800px;
}

.card {
    width: 200px;
    height: 300px;
    position: relative;
    transform-style: preserve-3d; /* 必须有 */
    transition: transform 0.6s ease-in-out; /* 动画过渡 */
}

.front-face, .back-face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden; /* 背面隐藏 */
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5em;
    color: white;
    background-color: #3498db;
}

.back-face {
    background-color: #e74c3c;
    transform: rotateY(180deg); /* 初始翻转到背面 */
}

.card:hover {
    transform: rotateY(180deg); /* 鼠标悬停时翻转 */
}

这里，当鼠标悬停在

.card

上时，

transform

属性从

none

（或

rotateY(0deg)

）平滑过渡到

rotateY(180deg)

，实现了翻转效果。

backface-visibility: hidden;

则确保了当元素背面朝向观察者时是不可见的，模拟了真实物体的遮挡。

利用
```
@keyframes
```
和
animation
实现更复杂的、自动播放的3D动画：
```
@keyframes
```
允许你定义动画的关键帧，即在动画的不同时间点上元素应该呈现的状态。
```
animation
```
属性则负责将这些关键帧应用到元素上，并控制动画的持续时间、重复次数、播放方向等。这对于创建循环播放的3D旋转、复杂的路径动画或场景变换非常强大。

例如，让一个立方体持续旋转：
```
@keyframes cubeSpin {
    0%   { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

.spinning-cube {
    /* ...立方体的基本样式和3D设置 */
    animation: cubeSpin 8s infinite linear; /* 应用动画 */
}
```
你可以在
```
@keyframes
```
中定义多个中间帧（如
```
25%
```
,
```
50%
```
,
```
75%
```
），并组合多种
```
transform
```
函数（
```
rotate
```
,
```
translate
```
,
```
scale
```
等），甚至改变
```
perspective-origin
```
或
```
transform-origin
```
来创建极其复杂的3D运动轨迹。

一些进阶技巧和注意事项：
- 性能优化：3D变换通常会触发GPU加速，但过多的复杂3D动画或不当使用（比如频繁改变
```
perspective
```
  值）仍可能导致性能问题。尽量使用
```
translateZ
```
  代替
```
margin
```
  或
```
top/left
```
  来移动元素，因为它更适合GPU处理。
- will-change
  属性：如果知道某个元素即将进行3D变换，可以提前设置
```
will-change: transform;
```
  ，浏览器会提前优化，为动画做好准备。
- 兼容性：虽然现代浏览器对CSS 3D支持良好，但在一些老旧或特定环境下可能需要添加浏览器前缀（如
```
-webkit-
```
  ）。不过现在大多数情况下已经不需要了。
- 结合JavaScript：对于需要用户拖拽、实时响应鼠标位置等更高级的交互式3D效果，通常需要结合JavaScript来动态计算和设置CSS
```
transform
```
  属性。CSS负责渲染，JS负责逻辑和事件处理。