UD5工具箱
操作步骤总览
CSS 3D 变换实验室的使用流程简单直观，无需注册或安装任何软件。打开网页即可开始调试 CSS 3D 属性。以下是详细的操作步骤指南，帮助您快速上手并充分利用工具的各项功能。
步骤 1打开工具页面
在浏览器中访问 CSS 3D 变换实验室页面。页面加载后，您将看到一个 3D 立方体预览区域和左侧的参数调节面板。默认状态下，立方体以正面视角显示，perspective 值为 800px，各旋转轴均为 0 度。页面同时显示实时 CSS 代码区域，展示当前状态对应的 CSS 代码。
步骤 2调整透视参数
首先尝试调整 Perspective 滑块。向左拖动减小透视距离（如设置为 300px），观察立方体近大远小效果增强；向右拖动增大透视距离（如设置为 2000px），效果趋近正交投影。然后调整 原点 X 和 原点 Y 滑块，改变透视消失点的位置。将原点移到左侧或上方，会模拟从不同角度观察 3D 场景的效果。注意观察每一步调整带来的视觉变化。
步骤 3探索三维旋转
接下来探索 RotateX、RotateY 和 RotateZ 三个旋转轴。RotateX 控制绕 X 轴旋转（上下翻转效果），RotateY 控制绕 Y 轴旋转（左右翻转效果），RotateZ 控制绕 Z 轴旋转（平面旋转效果）。尝试将 RotateX 设置为 -30 度，RotateY 设置为 30 度，观察立方体在三维空间中的倾斜效果。这三个轴的组合可以实现任意方向的三维旋转。
步骤 4调整平移与缩放
使用 TranslateX、TranslateY 和 TranslateZ 滑块控制立方体在三维空间中的位移。特别注意 TranslateZ 的效果——正值会将立方体推向观察者（看起来更大），负值会将立方体推离观察者（看起来更小）。Scale 滑块控制整体缩放比例，0.5 为原始大小的一半，2.0 为两倍大小。结合旋转和平移，可以创建出丰富的 3D 视觉层次。
步骤 5使用预设与便捷操作
点击预设按钮快速切换不同的视角效果：正面恢复正面观察，俯视从顶部观察，夸张透视使用小 perspective 值增强效果，正交感使用大 perspective 值模拟正交投影，倾斜呈现斜向角度。点击自动旋转按钮让立方体连续旋转，全方位观察 3D 效果。点击随机按钮生成意外的参数组合，激发创意灵感。点击重置按钮恢复初始状态。
步骤 6获取 CSS 代码
在页面底部的实时 CSS 代码区域，查看当前参数对应的完整 CSS 代码。代码会随着参数调整自动更新。点击复制按钮将代码粘贴到您的项目样式文件中。代码通常包含 .transform-container 的 perspective 和 perspective-origin 属性，以及 .cube 的 transform 属性（包含所有 rotateX/Y/Z、translateX/Y/Z 和 scale 值）。记得确保父容器设置了 transform-style: preserve-3d 以保留 3D 空间效果。