纯css能做出真正有体积感、可旋转的立体骰子，关键在于父容器必须设transform-style:preserve-3d和perspective，六个面需按立方体空间精确用translatez/rotatex/y定位，点阵须用伪元素绝对定位并随面同步变换，且所有面要加backface-visibility:hidden防穿模。
纯 CSS 能做出真正有体积感、可旋转的立体骰子，但必须用 transform-style: preserve-3d 搭配 6 个面的 transform 定位，否则只是“看起来像”——没有深度，转起来会穿模或塌陷。
骰子容器必须启用 3D 渲染上下文
这是最常被跳过的一步。父容器（比如 .dice）不设 transform-style: preserve-3d，所有子面即使加了 translateZ 和 rotateX，也会被扁平化到同一平面，失去立体感。
实操建议：
-
.dice必须设transform-style: preserve-3d - 同时推荐加上
perspective: 800px（值越小透视越强，太小会畸变） - 避免在
.dice上直接用transform: rotateX(45deg)初始化角度——应由各面独立定位，容器只负责提供 3D 环境和动画控制
六个面需按立方体顶点精确偏移
CSS 骰子不是靠“堆叠+遮罩”，而是把每个面（.face）用 transform 移动到立方体对应位置：前、后、左、右、上、下。偏差 1px 就会导致缝隙或重叠。
假设骰子边长为 100px，则半长为 50px，各面标准偏移如下：
- 前面：
translateZ(50px) - 后面：
translateZ(-50px) - 左面：
translateX(-50px) rotateY(90deg) - 右面：
translateX(50px) rotateY(90deg) - 上面：
translateY(-50px) rotateX(90deg) - 下面：
translateY(50px) rotateX(90deg)
注意顺序：先 translate 再 rotate，否则旋转中心会偏移。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
点阵（pips）要用绝对定位 + 伪元素，别用图片或 SVG
骰子点数必须随面一起旋转，如果用 background-image 或内嵌 svg，点不会跟着面的 transform 变形，导致旋转时点“浮在表面”或错位。
正确做法是每个 .face 内用 ::before / ::after 画点，配合 position: absolute 布局：
- 统一设
.face { position: absolute; width: 100%; height: 100%; } - 点用
border-radius: 50%+background实现，尺寸建议12px，距边距按面数动态计算（如一面居中，三面呈对角线） - 不要给点本身加
transform—— 它们已随父级.face一起参与 3D 变换
动画卡顿或闪烁？检查 backface-visibility 和 GPU 触发
快速旋转时出现撕裂、闪烁，大概率是背面未隐藏或未触发硬件加速。
必须加的两行：
- 所有
.face加backface-visibility: hidden（否则翻转时看到背面内容） -
.dice加transform: translateZ(0)或will-change: transform强制 GPU 渲染（尤其在 Safari 和旧版 Chrome 中） - 避免在动画中频繁读写
offsetTop或getBoundingClientRect()，这会强制同步布局计算，打断 60fps
真立体骰子的复杂点不在“怎么画六个面”，而在于每个面的 transform 是 3D 空间中的刚体变换——差一个参数，整个立方体就散架。调试时用浏览器 DevTools 的 3D 视图（Elements → 3D View）能立刻看出哪一面没对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
