UD5工具箱
第一步：熟悉界面布局
打开工具后，左侧区域是 3D 立方体的实时预览窗口，右侧是参数控制面板。预览窗口中的立方体有六个不同颜色的面，每个面标注了名称（Front、Back、Right、Left、Top、Bottom）。控制面板分为几个区域：预设（Presets）、透视（Perspective）、旋转（Rotation）、平移（Translation）、缩放（Scale）以及底部的操作按钮。
第二步：拖拽旋转视角
在左侧预览窗口中按住鼠标左键并拖拽，即可旋转 3D 立方体的观察视角。向左拖拽会从右侧观察立方体，向右拖拽会从左侧观察；向上拖拽会从下方观察，向下拖拽会从上方观察。松开鼠标后视角会保持在当前位置。通过拖拽旋转，你可以从任意角度观察立方体，直观理解当前变换参数在 3D 空间中的实际效果。
第三步：调整透视参数
在控制面板的 Perspective 区域，Perspective 滑块控制透视距离，默认值为 500px。向左拖动减小数值会使透视效果更强烈（近大远小更明显），向右拖动增大会使效果趋近于平行投影。Perspective Origin X 和 Y 滑块控制透视原点的水平和垂直位置，默认为 50%（中心），调整后可以模拟从不同角度观察物体。你也可以在预览窗口中滚动鼠标滚轮来快速调整透视距离。
第四步：设置旋转角度
在 Rotation 区域，分别调整 RotateX、RotateY、RotateZ 三个滑块。RotateX 控制绕水平轴旋转（0-360 度），模拟俯仰动作；RotateY 控制绕垂直轴旋转，模拟偏航动作；RotateZ 控制绕深度轴旋转，模拟翻滚动作。建议先单独调整某个轴的旋转，观察效果后再组合调整。例如，要实现卡片翻转效果，通常只需要调整 RotateY；要实现立方体旋转效果，可以同时调整 RotateX 和 RotateY。
第五步：调整平移和缩放
在 Translation 区域，TranslateX 控制水平位移，TranslateY 控制垂直位移，TranslateZ 控制深度位移。特别注意 TranslateZ 的效果依赖于 Perspective 的设置。在 Scale 区域，ScaleX、ScaleY、ScaleZ 分别控制三个轴向的缩放因子，默认值均为 1.0。将 ScaleZ 调整为 0.5 会使立方体在深度方向压缩，结合旋转可以创建有趣的视觉效果。
第六步：使用快速预设
在 Presets 区域，点击不同的预设按钮可以一键切换到常用的参数组合。推荐新手从默认3D开始，然后依次尝试其他预设来理解不同参数组合的效果。例如，点击“夸张透视”可以看到极强的近大远小效果，点击“平面视图”可以关闭所有 3D 效果对比查看差异。
第七步：复制代码并应用到项目
调整到满意的参数后，点击底部的“Copy CSS”按钮，工具会将当前的变换参数生成为标准的 CSS 代码并复制到剪贴板。生成的代码包含 transform-origin、perspective、perspective-origin 和 transform 属性，可以直接粘贴到你的 CSS 文件或 style 属性中使用。如果需要重新开始，点击“Reset”按钮即可恢复所有参数到默认值。