无需登录 数据私有 本地保存

CSS 3D立方体生成器 - 旋转正方体代码

13
1
0
0
前
后
右
左
上
下
🖱 拖拽旋转  |  滚轮调整透视
立方体参数
配色方案
生成的 HTML + CSS 代码
常见问题 & 知识点

perspective 定义了观察者与 z=0 平面之间的距离，决定了 3D 效果的强度。值越小，透视效果越强烈（近大远小越明显），立方体看起来更"夸张"；值越大，透视越平缓，接近正交投影。推荐范围 500px ~ 1200px，800px 是常用的平衡值。透视需要设置在 3D 元素的父容器上。

transform-style: preserve-3d 让子元素保留在 3D 空间中，而不是被扁平化到父元素的 2D 平面。构建立方体时，这个属性必须设置在直接包含 6 个面的容器元素上。如果忘记设置，所有面会堆叠在一起，无法形成立体效果。注意：该属性不会继承，需要在每一层 3D 容器上显式声明。

每个面先通过 rotateX/rotateY 旋转到对应方向，再使用 translateZ(半边长) 推离中心。例如：前面直接 translateZ(100px)；右面先 rotateY(90deg) 再 translateZ(100px)；后面先 rotateY(180deg) 再 translateZ(100px)。所有面的宽高等于立方体边长，绝对定位在容器中心（top:0; left:0），通过 3D 变换各自就位。

生成的代码是纯 HTML + CSS，无需任何 JavaScript 框架。只需复制代码并粘贴到你的 HTML 文件中即可。立方体使用 CSS animation 自动旋转。你可以调整 --size 变量改变大小，修改 animation-duration 控制速度，或替换各面的 background-color 来更改配色。

CSS 3D transform 由 GPU 加速渲染，性能优异。主流浏览器（Chrome、Firefox、Safari、Edge）均良好支持。移动端 iOS Safari 和 Android Chrome 同样支持 perspective 和 preserve-3d。注意：过大的立方体尺寸（超过 400px）或过多 3D 元素可能在低端设备上导致帧率下降。本工具生成的代码在主流设备上均可流畅运行。
🔧 相关工具