用 CSS 打造 3D 摇骰子：从 0 到 1 的立体视觉魔法

🌌 引子：骰子的 3D 幻想

上周和朋友吃饭的时候，想玩摇骰子，发现店里没有骰盅，于是就想看看有没有现成的电子摇骰子，发现确实有，但是手机摇骰子小程序广告满天飞。突发奇想：不如用 CSS 实现一个「无广告版」3D 骰子？毕竟前端的魔法，就是让 2D 屏幕绽放 3D 魅力 ------ 今天就带你揭开这个视觉魔术的面纱。微信小程序「骰友局」可以在线体验摇骰子的效果

功能实现

🔍 3D 世界的入场券

CSS 的transform-style: preserve-3d是关键代码，它告诉浏览器：子元素在3D 空间中展开即在应用3D变换时，确保元素及其子元素在三维空间中正确渲染，我们先搭建3D舞台：

🧭 3D 坐标系初体验

再来理解一下，怎么在2d平面实现3d的立体效果呢？首先我们先来看看3d的坐标体系图。

想象你的屏幕是 XY 平面（途中蓝色的网格面），Z 轴垂直指向你。每个面需要通过translateZ（前后移动）和旋转（绕轴翻转）归位：

面	旋转方式	移动距离	视觉效果
前	无旋转	`translateZ(50px)`	正对观众
后	无旋转	`translateZ(-50px) rotateY(180deg)`	藏在后方（文字转正）
左	`rotateY(-90deg)`	`translateX(-50px)`	左侧面转向观众
右	`rotateY(90deg)`	`translateX(50px)`	右侧面转向观众
上	`rotateX(-90deg)`	`translateY(-50px)`	顶面朝下
下	`rotateX(90deg)`	`translateY(50px)`	底面朝上

💡 关键点 ：所有面的基准点（transform-origin）默认在中心，旋转时会绕中心点转动。

我们来实现一个正方体，首先需要一个父类设置子类3d效果，然后通过相对定位实现六个面。

🧩 第一幕：构建 3D 舞台

html 复制代码

<div class="dice">
  <!-- 六个面：前/后/左/右/上/下 -->
  <div class="face front">1</div>
  <div class="face back">2</div>
  <div class="face left">3</div>
  <div class="face right">4</div>
  <div class="face top">5</div>
  <div class="face bottom">6</div>
</div>

<style>
.dice {
  width: 100px;
  height: 100px;
  position: relative;
  transform-style: preserve-3d; /* 开启3D空间 */
  perspective: 600px; /* 模拟人眼距离，值越小立体感越强 */
  margin: 50px auto;
}
</style>

🎨 第二幕：六个面的立体雕刻

盒子实现了，我们来一个个面来实现，以50px大小为准实现

首先是front面，这个就没有什么特别的了,就是正常的一个矩形效果，我们来看看back面，同样也是一个矩形，只需要沿着Z轴往后平移transform: translateZ(-50px);

明明往后移了，为什么重叠了？难道理论知识不对？其实这是因为人的视角是水平直视前方的，所以我们只需要给盒子（box）旋转个角度看看

transform: rotateX(-45deg) rotateY(45deg);

可以看到效果实现了！那么我们照着理论知识接着实现其他面。

接着先实现left面 ，它则需要以y轴为基准线进行旋转90度。

transform: rotateY(90deg);

同理right面也是一样旋转，只需要调整一下x轴的位置即可

最后来实现top面 ，它则需要以X轴为基准线进行旋转90度。

transform: rotateX(90deg)

同理也可得出bottom面

下面是一个正方体的完整例子

骰子

正方体实现了那么只需要给每个面加上点不就可以实现骰子了？

比如1点

js 复制代码

<div class="front">
    <div class="dot"></div>
</div>

.dot {
  position: absolute;
  top: 17px;
  left: 17px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: red;
}

原理都是一样以此类推。最终实现效果如下

🌟 总结：从代码到游戏的蜕变

通过这篇教程，我们不仅实现了 3D 骰子，更掌握了 CSS 3D 变换的核心原理。最终我将这个效果扩展成微信小程序「骰友局」，支持多人对战 ------ 这就是前端的魅力：用代码创造真实的互动体验。