3D魔方-Css实现方法
效果：
实现思路：
1. 在根节点定义尺寸与配色等CSS变量（w、gap、allW、c1…bg）。
2. 创建容器结构：.container 包裹 .container-box，并将页面居中显示。
3. 设置透视与3D：给 .container 设置 perspective；给 .container-box 开启 preserve-3d。
4. 构建六个面：创建 .cube-side（front/back/right/left/top/bottom），每个面内添加一个 .cube-grid。
5. 使用 box-shadow 生成 3×3 方格阵列，依据 w 与 gap 计算偏移量形成九宫格。
6. 用 translateZ/rotateX/rotateY 将六个面定位到立方体的正确位置。
7. 启用背面隐藏：backface-visibility: hidden，避免背面闪烁或穿透导致的视觉问题。
8. 添加旋转动画：定义 @keyframes rotate，并在 .container-box 上应用 animation。
9. 可通过调整变量改变魔方大小、间距与颜色主题，实现快速定制。
附代码：
<!doctype html>
<html lang="zh-CN">
<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>3D魔方</title><style>:root {--w: 60px;--gap: 10px;--allW: calc(3 * var(--w) + 4 * var(--gap));--c1: #FF0000;--c2: green;--c3: #fff;--c4: #97d497;--c5: #291a80;--c6: rgb(255, 0, 212);--bg: #0d0e0d;}* { box-sizing: border-box; }html, body { height: 100%; }body {margin: 0;display: grid;place-items: center;background: var(--bg);color: #fff;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";}.container {width: var(--allW);height: var(--allW);perspective: 900px;}.container-box {position: relative;width: var(--allW);height: var(--allW);transform-style: preserve-3d;animation: rotate 10s infinite alternate;}.cube-side {width: 100%;height: 100%;position: absolute;background: var(--bg);border-radius: 7px;padding: var(--gap);backface-visibility: hidden;}.cube-side .cube-grid {width: var(--w);height: var(--w);border-radius: calc(var(--w) / 5);color: var(--c);background: currentColor;}.cube-grid {box-shadow:calc(var(--w) + var(--gap)) 0 0 currentColor,calc(var(--w) * 2 + var(--gap) * 2) 0 currentColor,0 calc(var(--w) + var(--gap)) currentColor,calc(var(--w) + var(--gap)) calc(var(--w) + var(--gap)) currentColor,calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) + var(--gap)) currentColor,0 calc(var(--w) * 2 + var(--gap) * 2) currentColor,calc(var(--w) + var(--gap)) calc(var(--w) * 2 + var(--gap) * 2) currentColor,calc(var(--w) * 2 + var(--gap) * 2) calc(var(--w) * 2 + var(--gap) * 2) currentColor;}/* Faces positioning */.cube-side.side-front { transform: translateZ(calc(var(--allW) / 2)); }.cube-side.side-back { transform: rotateX(-180deg) translateZ(calc(var(--allW) / 2)); }.cube-side.side-right { transform: rotateY(90deg) translateZ(calc(var(--allW) / 2)); }.cube-side.side-left { transform: rotateY(-90deg) translateZ(calc(var(--allW) / 2)); }.cube-side.side-top { transform: rotateX(90deg) translateZ(calc(var(--allW) / 2)); }.cube-side.side-bottom { transform: rotateX(-90deg) translateZ(calc(var(--allW) / 2)); }@keyframes rotate {0% { transform: rotateZ(0deg) rotateX(0deg) rotateY(0deg); }15% { transform: rotateZ(45deg) rotateX(45deg) rotateY(45deg); }30% { transform: rotateZ(45deg) rotateX(90deg) rotateY(90deg); }45% { transform: rotateZ(45deg) rotateX(135deg) rotateY(135deg); }60% { transform: rotateZ(45deg) rotateX(90deg) rotateY(180deg); }75% { transform: rotateZ(45deg) rotateX(45deg) rotateY(225deg); }100% { transform: rotateZ(45deg) rotateX(0deg) rotateY(270deg); }}</style>
</head>
<body><div class="container"><div class="container-box"><div class="cube-side side-front"><div class="cube-grid" style="--c: var(--c1)"></div></div><div class="cube-side side-back"><div class="cube-grid" style="--c: var(--c2)"></div></div><div class="cube-side side-right"><div class="cube-grid" style="--c: var(--c3)"></div></div><div class="cube-side side-left"><div class="cube-grid" style="--c: var(--c4)"></div></div><div class="cube-side side-top"><div class="cube-grid" style="--c: var(--c5)"></div></div><div class="cube-side side-bottom"><div class="cube-grid" style="--c: var(--c6)"></div></div></div></div>
</body>
</html>