No Login Data Private Local Save

Isometric Box CSS Generator – Online 3D Cube Builder

3
0
0
0
尺寸 Dimensions
Width 宽度200px
Height 高度150px
Depth 深度150px
旋转 Rotation
Rotate X-30°
Rotate Y45°
Rotate Z0°
透视 Perspective
Perspective 距离1500px
面颜色 Face Colors
选项 Options
生成的 CSS & HTML Generated Code
/* Loading... */

复制代码到你的项目中即可使用。包含完整的HTML结构和CSS样式。

常见问题 FAQ

等距CSS盒子是使用CSS 3D Transforms技术创建的、以等距视角呈现的3D立方体。它通过transform-style: preserve-3d和rotateX/rotateY组合，在网页上模拟出立体视觉效果，无需WebGL或Canvas，纯CSS即可实现。等距视角的特点是没有透视缩短，所有平行线保持平行，常用于图标设计、信息图和游戏UI。

真正的等距投影角度为 rotateX(-35.264°) rotateY(45°)（其中35.264° = arctan(1/√2)）。但在网页设计中，常用 rotateX(-30°) rotateY(45°) 作为简化方案，视觉效果也非常接近。本工具提供多个预设角度供你选择。

Perspective值越小（如400-600px），透视缩短效果越强烈，3D感更戏剧化；值越大（如2000-5000px），越接近正交投影（等距效果）。对于纯等距外观，建议使用 2000px以上的透视距离。本工具默认1500px，提供200-5000px的调节范围。

CSS 3D Transforms在现代浏览器中兼容性良好：Chrome 36+、Firefox 49+、Safari 9+、Edge 12+均完整支持。移动端iOS Safari 9+和Android Chrome也支持。IE11部分支持（不支持preserve-3d）。建议添加-webkit-前缀以覆盖更广范围，本工具生成的代码已包含必要前缀。

模拟光照的常用技巧：顶面最亮（光源在上方）、前面次亮、右侧面中等偏暗、左侧面更暗、底面和背面最暗。使用同一色系的不同明度（HSL调整Lightness）可快速创建逼真的光照效果。本工具提供多种预设调色板供参考。

线框模式将面背景设为透明并显示边框，帮助你理解3D结构、调试面的位置关系，也常用于创建科技感或设计感十足的3D线框效果。在开发阶段开启线框模式可以清晰看到每个面的边界和位置。

当然！可以使用CSS @keyframes为立方体添加旋转动画。本工具内置了自动旋转开关，勾选后立方体会绕Y轴持续旋转。你也可以基于生成的代码自行修改动画关键帧，实现弹跳、翻转、悬停交互等效果。配合transition属性还可以实现平滑的状态切换。

复制生成的HTML和CSS代码，粘贴到你的项目中。HTML部分放入<body>中，CSS部分放入<style>标签或独立的CSS文件中。外层容器使用perspective属性控制3D深度，内层.cube元素使用transform-style: preserve-3d保持3D空间。你可以修改--cube-width等CSS变量来动态调整尺寸。
代码已复制！Code Copied!
🔧 Related Tools