UD5工具箱
术语总览
CSS 3D 变换涉及多个核心概念和属性，理解这些术语是掌握 3D 效果开发的基础。以下术语解释结合本工具的实际功能，帮助您从理论到实践全面理解 CSS 3D Transform 技术体系。
perspective（透视距离）
定义观察者与 z=0 平面之间的距离，用于为 3D 空间中的元素赋予透视效果。值越小，透视效果越强烈（近大远小越明显）；值越大，效果越接近正交投影。在本工具中，Perspective 滑块控制此属性，常见值范围为 400px 到 1200px。该属性通常设置在父容器上，作用于所有子元素的 3D 变换。
perspective-origin（透视原点）
决定透视的消失点位置，即观察者的视角位置。默认值为 50% 50%，表示消失点在元素中心。改变此值可以模拟从不同角度观察 3D 场景的效果。在本工具中，原点 X 和原点 Y 滑块分别控制水平和垂直方向的透视原点位置。设置为 0% 0% 表示从左上角观察，100% 100% 表示从右下角观察。
rotateX / rotateY / rotateZ（三维旋转）
分别控制元素绕 X 轴、Y 轴和 Z 轴的旋转角度。RotateX 实现上下翻转效果，RotateY 实现左右翻转效果，RotateZ 实现平面内的旋转。三个轴的组合可以实现任意方向的三维旋转。在本工具中，每个旋转轴都有独立的滑块控制，支持负角度到正角度的全范围调节，帮助开发者直观理解三个旋转轴的独立作用和组合效果。
translateX / translateY / translateZ（三维平移）
控制元素在三维空间中沿各轴的位移。TranslateX 控制水平位移，TranslateY 控制垂直位移，TranslateZ 控制深度方向的位移。TranslateZ 的正值会将元素推向观察者（视觉上变大），负值会将元素推离观察者（视觉上变小）。在本工具中，平移滑块与旋转滑块配合使用，可以创建出丰富的 3D 空间层次感。
scale（缩放）
控制元素的缩放比例。值为 1.0 表示原始大小，小于 1.0 表示缩小，大于 1.0 表示放大。在 3D 变换中，scale 可以与其他变换属性组合使用，实现复合变换效果。本工具的 Scale 滑块支持精确调节，帮助开发者观察不同缩放比例下 3D 元素的视觉表现。
transform-style: preserve-3d
默认情况下，子元素在父元素进行 3D 变换时会被扁平化到父元素的 2D 平面上。设置 transform-style: preserve-3d 后，浏览器会保留子元素在 3D 空间中的位置关系。这是构建 3D 立方体、3D 轮播等效果必不可少的属性。需要注意，该属性必须设置在直接父元素上，且不能与 overflow: hidden 等属性共存。在本工具中，立方体的六个面正是因为父容器设置了 preserve-3d 才能正确显示为 3D 效果。
3D 立方体构建
构建一个完整的 CSS 3D 立方体需要 6 个面，每个面绝对定位在同一个位置，然后分别使用 rotateX/Y 和 translateZ 将它们旋转并移动到正确位置：前面 translateZ(半边长)，后面 rotateY(180deg) translateZ(半边长)，右面 rotateY(90deg) translateZ(半边长)，左面 rotateY(-90deg) translateZ(半边长)，上面 rotateX(90deg) translateZ(半边长)，下面 rotateX(-90deg) translateZ(半边长)。本工具的 3D 场景正是基于此原理构建的可视化立方体。
CSS 3D 与 WebGL 的区别
CSS 3D 变换适合简单的 3D 效果（卡片翻转、3D 轮播、简单立方体），易于实现且不需要 JavaScript。WebGL（如 Three.js）则适合复杂的 3D 场景（游戏、数据可视化、复杂模型），支持光照、材质、阴影等高级特性，但学习曲线更陡。对于大多数 UI 层面的 3D 需求，CSS 3D 变换足够且性能优秀。本工具专注于 CSS 3D 变换的调试，帮助开发者在不需要 WebGL 的情况下实现高质量的 3D 效果。