css3立方体

想要实现一个带数字1-6的CSS3立方体，用纯CSS3（transform + transition）来完成，包含立体效果、数字排版和基础的旋转交互，让立方体更直观。

一、实现思路

  1. 容器结构：外层父容器作为立方体的“舞台”，内层 .cube 是立方体本体，6个面（.face1-.face6）作为子元素。
  2. 3D变换：通过 transform-style: preserve-3d 开启3D空间，给每个面设置不同的 translateZ（位移）+ rotateX/rotateY（旋转），拼接成立方体。
  3. 数字排版：每个面居中显示数字1-6，通过字体样式和定位保证视觉居中。
  4. 交互效果：添加鼠标悬浮旋转动画，方便查看所有面。

二、完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 数字立方体</title>
  <style>
    /* 全局重置 + 舞台样式 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background-color: #f0f0f0;
    }

    /* 立方体容器（舞台）：开启3D空间，添加透视效果 */
    .cube-container {
      width: 300px;
      height: 300px;
      perspective: 1000px; /* 透视，模拟人眼到立方体的距离，数值越小立体感越强 */
      perspective-origin: center center; /* 透视原点 */
    }

    /* 立方体本体：3D变换容器 */
    .cube {
      position: relative;
      width: 100%;
      height: 100%;
      transform-style: preserve-3d; /* 开启子元素的3D变换 */
      transition: transform 1s ease; /* 旋转过渡动画 */
      /* 初始旋转角度，方便看到多个面 */
      transform: rotateX(-30deg) rotateY(45deg);
    }

    /* 鼠标悬浮时旋转立方体，查看不同面 */
    .cube-container:hover .cube {
      transform: rotateX(-30deg) rotateY(405deg);
    }

    /* 立方体每个面的基础样式 */
    .cube .face {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px solid #333;
      background-color: rgba(255, 255, 255, 0.8); /* 半透明白色，增强立体感 */
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 80px;
      font-weight: bold;
      color: #333;
      /* 抗锯齿，让数字更清晰 */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* 逐个定义6个面的3D位置（核心） */
    /* 前面：向前平移150px（立方体边长的一半） */
    .face1 { transform: translateZ(150px); }
    /* 后面：向后平移150px + 旋转180deg（避免数字颠倒） */
    .face2 { transform: translateZ(-150px) rotateY(180deg); }
    /* 右面：向右平移150px + 旋转Y 90deg */
    .face3 { transform: translateX(150px) rotateY(90deg); }
    /* 左面：向左平移150px + 旋转Y -90deg */
    .face4 { transform: translateX(-150px) rotateY(-90deg); }
    /* 上面：向上平移150px + 旋转X 90deg */
    .face5 { transform: translateY(-150px) rotateX(90deg); }
    /* 下面：向下平移150px + 旋转X -90deg */
    .face6 { transform: translateY(150px) rotateX(-90deg); }
  </style>
</head>
<body>
  <div class="cube-container">
    <div class="cube">
      <div class="face face1">1</div>
      <div class="face face2">2</div>
      <div class="face face3">3</div>
      <div class="face face4">4</div>
      <div class="face face5">5</div>
      <div class="face face6">6</div>
    </div>
  </div>
</body>
</html>

三、关键代码解释

  1. 3D 核心属性

    • perspective：给父容器（.cube-container）设置，模拟人眼的透视效果，数值越大立方体看起来越“远”，立体感越弱；数值越小越“近”，立体感越强。
    • transform-style: preserve-3d：给立方体本体（.cube）设置，确保子元素（6个面）在3D空间中渲染，而不是扁平化。
    • translateZ：每个面沿Z轴位移的距离是立方体边长的一半（300px/2=150px），这样6个面能刚好拼接成立方体的6个面。

  2. 旋转角度说明

    • 前面/后面：仅Z轴位移，后面额外旋转180deg避免数字颠倒。
    • 左面/右面：X轴位移 + Y轴旋转90/-90deg。
    • 上面/下面：Y轴位移 + X轴旋转90/-90deg。

  3. 交互效果
    鼠标悬浮在立方体容器上时，立方体沿Y轴旋转360deg（405deg=45deg+360deg），配合1秒的过渡动画，能清晰看到所有6个面的数字。

四、扩展优化（可选）

  1. 自定义样式：可修改每个面的背景色（如给不同数字设置不同颜色）：
    1
    2
    3
    4
    5
    6
    .face1 { background-color: rgba(255, 99, 71, 0.8); color: white; }
    .face2 { background-color: rgba(255, 165, 0, 0.8); color: white; }
    .face3 { background-color: rgba(255, 215, 0, 0.8); color: #333; }
    .face4 { background-color: rgba(144, 238, 144, 0.8); color: #333; }
    .face5 { background-color: rgba(135, 206, 235, 0.8); color: #333; }
    .face6 { background-color: rgba(123, 104, 238, 0.8); color: white; }
  2. 控制旋转速度：修改 .cube 的 transition 时长（如 0.5s 更快，2s 更慢）。
  3. 固定视角：若不需要悬浮旋转，删除 .cube-container:hover .cube 样式即可。

总结

  1. 实现CSS3立方体的核心是 perspective（透视）+ transform-style: preserve-3d（3D空间）+ 6个面的精准 translate/rotate 变换。
  2. 每个面的Z轴位移距离必须是立方体边长的一半，才能拼接成完整的立方体。
  3. 数字居中通过 flex 布局实现，简单且兼容性好，是CSS居中的最优方案。
学无止境
css3立方体
https://cszy.top/2015-02-06 css3立方体/
作者
csorz
发布于
2015年2月6日
许可协议