CSS 3D 变换实验室 - 旋转、平移与透视探索

perspective 属性定义了观察者与 z=0 平面之间的距离，用于为 3D 空间中的元素赋予透视效果。值越小，透视效果越强烈（物体近大远小越明显）；值越大，效果越接近正交投影。通常设置在父容器上，作用于所有子元素的 3D 变换。常见值在 400px 到 1200px 之间。在本工具中，您可以通过 Perspective 滑块实时调整此值，直观感受不同透视距离带来的视觉差异。

perspective 决定透视的强度（观察距离），而 perspective-origin 决定透视的消失点位置（观察角度）。默认的 perspective-origin: 50% 50% 表示消失点在元素中心。改变它可以模拟从不同角度观察 3D 场景的效果。在本工具中，原点 X 和原点 Y 滑块分别控制 perspective-origin 的水平和垂直分量。例如将原点移到左侧（0% 50%）会模拟从左边观察 3D 场景，移到上方（50% 0%）则模拟从上方观察。

默认情况下，子元素在父元素进行 3D 变换时会被扁平化到父元素的 2D 平面上。transform-style: preserve-3d 告诉浏览器保留子元素在 3D 空间中的位置关系。这是构建 3D 立方体、3D 轮播等效果必不可少的属性。需要注意，它必须设置在直接父元素上，且不能与 overflow: hidden 等属性共存。在本工具的 3D 场景中，立方体的父容器正是设置了 preserve-3d，才能让六个面正确地显示在三维空间中。

构建 CSS 3D 立方体需要 6 个面，每个面绝对定位在同一个位置，然后分别使用 rotateX/Y 和 translateZ 将它们旋转并移动到正确位置：前面 translateZ(半边长)，后面 rotateY(180deg) translateZ(半边长)，右面 rotateY(90deg) translateZ(半边长)，左面 rotateY(-90deg) translateZ(半边长)，上面 rotateX(90deg) translateZ(半边长)，下面 rotateX(-90deg) translateZ(半边长)。父元素需设置 transform-style: preserve-3d。在本工具中，您可以通过调整旋转和平移参数，实时观察每个面在 3D 空间中的位置变化。

优化 CSS 3D 变换性能可以遵循以下建议：使用 will-change: transform 提前告知浏览器哪些元素会发生变化；尽量使用 transform 和 opacity 做动画，它们能触发 GPU 加速；避免在 3D 场景中使用 box-shadow 或复杂背景，它们会触发额外的重绘；合理控制 perspective 值，极端值可能导致渲染异常；移动端注意 3D 元素数量和面数，过多会显著影响帧率。本工具的实时预览功能可以帮助您在开发阶段就发现潜在的性能问题。

CSS 3D 变换适合简单的 3D 效果（卡片翻转、3D 轮播、简单立方体），易于实现且不需要 JavaScript。WebGL（如 Three.js）则适合复杂的 3D 场景（游戏、数据可视化、复杂模型），支持光照、材质、阴影等高级特性，但学习曲线更陡。对于大多数 UI 层面的 3D 需求，CSS 3D 变换足够且性能优秀。本工具专注于 CSS 3D 变换的调试，帮助您在不引入 WebGL 的情况下实现高质量的 3D 效果。

点击工具栏中的"自动旋转"按钮即可启动连续旋转动画。立方体会自动绕 Y 轴持续旋转，帮助您全方位观察 3D 效果。在自动旋转过程中，您仍然可以调整左侧的参数滑块，观察不同参数组合在旋转过程中的动态表现。再次点击"自动旋转"按钮可以停止动画。这个功能特别适合在向他人展示 3D 效果或进行教学演示时使用。

在本工具底部的实时 CSS 代码区域，会自动生成当前参数对应的完整 CSS 代码。点击复制按钮后，将代码粘贴到您的项目样式文件中。通常需要确保：父容器设置了 perspective 和 transform-style: preserve-3d；子元素的 transform 属性包含所有旋转、平移和缩放值。如果需要制作动画效果，可以将当前的 transform 值作为 @keyframes 的某一关键帧，结合 transition 或 animation 实现平滑的 3D 动画过渡。