Tridiv

Tridiv是做什么的？

Tridiv是一款基于Web的CSS 3D编辑器，可视化创建 3D 形状并自动生成纯 CSS 状态，无需 JavaScript 和 WebGL，直接在浏览器中创建、查看和导出 3D 元素，主要用于前端或设计相关的工作 UI 展示、讲课等。该项目由 Julian Garnier开发，并发布于知识共享署名-非商业性-禁止演绎 3.0 授权协议下，对于希望了解有关 CSS 转换的有趣用法、想要实现交互元素或简单视觉奇观的项目而言是一个很好的小工具。

核心功能

• CSS 3D 建模：通过可视化界面创建 3D 形状，自动生成对应的 CSS 代码。
• 实时预览：在浏览器中实时查看 3D 效果，无需本地安装或编译。
• 组件组合：支持多个形状组合成复杂结构，如 iPhone、X-Wing 飞机等。
• 代码导出：可直接复制生成的 HTML/CSS 代码，用于项目集成或学习参考。

应用场景

• 前端开发中的 3D UI 元素设计
• 教学演示 CSS 3D 转换原理
• 轻量级 3D 可视化实验
• 设计师快速原型建模

示例作品

• iPhone 4S：由 8 个形状组成，148 个面
• X-Wing 战机：由 47 个形状组成，297 个面
• 其他复杂结构：支持超过 20 个形状组合

Tridiv使用教程：从零开始创建CSS 3D模型

第一步：打开 Tridiv 编辑器

访问Tridiv官网（https://tridiv.com/），无需注册或安装，直接在浏览器中使用。

第二步：创建 3D 形状

点击左上角的 “开始使用应用程序”。

点击编辑区的“添加形状”，选择 Box(立方体)、Cylinder(圆柱)、Prism(三棱柱)、Pyramid(金字塔)，拖动形状可以旋转、缩放、移动。

第三步：设置样式与结构

右面的属性栏设置：大小（Width, Height, Depth）、颜色 (Background)、移动轴线（TranslateX/Y/Z）、旋转轴线（RotateX/Y/Z）、多个图形组成较为复杂的物体如 iPhone、X-Wing 等样机。

第四步：导出代码

点击右边上面的“代码”，就会自动生成对应的 HTML 以及 CSS，可以复制到本地/CodePen 中查看调试显示效果。

相关项目资料

Julian Garnier社交媒体：https://x.com/JulianGarnier

Tridiv使用总结测评

Tridiv 是一款非常有趣并且适合教学的工具，对于 CSS3 感兴趣的开发者和设计师都可以试试。当然，它并不支持交互逻辑或者复杂渲染，但对于静态 3D 元素的表现已经足够优秀了。如果你要探寻 CSS 的边界，这个工具可以试试！