UD5工具箱
实时参数调节面板
工具左侧提供完整的参数调节面板，包含六大类 CSS 3D 属性的精确控制：Perspective（透视距离）滑块范围覆盖常用值域，控制观察者与 3D 场景之间的距离；原点 X/Y（perspective-origin）控制透视消失点的位置；RotateX/Y/Z三个旋转轴滑块支持负角度到正角度的全范围调节，实现任意方向的三维旋转；TranslateX/Y/Z三个平移轴滑块控制元素在三维空间中的位移；Scale缩放滑块控制元素的大小比例。每个滑块都附带数值显示，支持精确到小数点后两位的参数读取。
3D 场景实时预览
主视图区域展示一个可交互的 3D 立方体场景，六个面分别标注前、后、右、左、上、下字样。用户可以直接在场景中拖拽旋转立方体以不同角度观察 3D 效果，使用鼠标滚轮调整透视距离。所有参数调整的结果都会即时反映在 3D 场景中，实现所见即所得的调试体验。
预设视角快速切换
提供六种预设视角一键切换：默认视角恢复初始状态，正面视角从正前方观察，俯视视角从顶部向下观察，夸张透视使用较小的 perspective 值增强近大远小效果，正交感使用较大的 perspective 值模拟正交投影，倾斜视角呈现斜向观察效果。此外还有自动旋转和随机旋转功能，帮助开发者快速探索不同的 3D 呈现方式。
实时 CSS 代码生成
底部的实时 CSS 代码区域会根据当前所有参数自动生成完整的 CSS 代码片段。代码包含 perspective、perspective-origin、transform 属性（rotateX/Y/Z、translateX/Y/Z、scale）等所有已修改的属性值。开发者可以直接点击复制按钮将代码粘贴到项目样式文件中，大幅提高开发效率。
便捷操作按钮
工具提供重置按钮一键恢复所有参数到默认值，随机按钮生成随机参数组合用于探索意外效果，自动旋转按钮启动连续旋转动画帮助全方位观察 3D 效果。这些便捷操作让开发者可以快速尝试不同的参数组合，发现意想不到的 3D 视觉效果。
3D 概念学习辅助
通过交互式操作，开发者可以直观理解 CSS 3D 变换中的核心概念：perspective 值越小透视效果越强烈（近大远小越明显），值越大越接近正交投影；perspective-origin 控制消失点位置，改变观察角度；transform-style: preserve-3d 是构建 3D 立方体的必要属性。本工具内置的常见问题解答覆盖了这些核心知识点，帮助开发者从理论到实践全面掌握 CSS 3D 变换技术。