CSS 3D 变换沙盒 - 平移旋转缩放与透视

perspective 是一个 CSS 属性，用于定义 3D 变换元素与观察者（用户的眼睛）之间的距离，单位为像素。它需要应用在 3D 变换元素的父元素上，为子元素创建一个 3D 透视空间。perspective 的值越小，近大远小的透视效果越强烈，类似于广角镜头的效果；值越大，效果越趋近于平行投影（正交投影），类似于长焦镜头的效果。当值为 none 时，没有透视效果，所有元素在同一平面上呈现。在工具中，你可以通过 Perspective 滑块或鼠标滚轮来调整透视距离，实时观察不同值对 3D 效果的影响。

perspective 和 perspective-origin 是两个不同但紧密相关的属性。perspective 定义了观察者距离 3D 空间平面的远近，控制的是“镜头”的焦距，影响透视效果的强弱。perspective-origin 定义了观察者在透视空间中的位置，控制的是“镜头”的位置，影响从哪个角度观察 3D 物体。例如，默认的 perspective-origin 为 50% 50%，表示观察者在元素中心正前方；如果将 X 设为 0%，观察者在左侧，你会看到元素的右侧面。这两个属性协同工作，perspective 决定效果强度，perspective-origin 决定观察角度。在工具中，你可以分别调整这两个属性来探索它们的不同作用。

transform-style: preserve-3d 是一个至关重要的 CSS 属性，它告诉浏览器保留子元素的 3D 位置关系，而不是将它们扁平化到父元素的 2D 平面上。默认值为 flat，此时所有子元素会被投影到同一平面上，即使应用了 3D 变换也看不到真正的 3D 效果。设置为 preserve-3d 后，子元素会在真正的 3D 空间中定位，彼此之间产生遮挡关系和透视变形。在实际开发中，如果你需要实现嵌套的 3D 效果（如立方体的六个面），必须在容器元素上设置此属性。工具在生成的 CSS 代码中已自动包含此属性，确保你复制的代码能正确呈现 3D 效果。

translateZ 和 perspective 是 CSS 3D 变换中两个密切相关的概念。perspective 定义了观察者到 3D 空间原点的距离，而 translateZ 让元素沿 Z 轴（观察方向）移动。当 perspective 存在时，translateZ 为正值会使元素向观察者靠近，看起来更大；负值会使元素远离，看起来更小。这种效果类似于现实中物体靠近眼睛时看起来更大。在实际应用中，这种组合常用于实现视差滚动效果、卡片翻转动画、按钮点击缩放等。在工具中，调整 TranslateZ 时可以明显观察到它与 Perspective 的配合效果：同样的 TranslateZ 值，在不同的 Perspective 设置下会产生不同程度的视觉变化。

CSS 3D 变换的性能表现总体良好，因为它可以利用 GPU 硬件加速。浏览器在处理 transform 属性时通常会触发 GPU 合成层，实现流畅的动画效果。在现代移动设备上，简单的 3D 变换（如卡片翻转、立方体旋转）通常能保持 60fps 的流畅度。但需要注意以下几点以确保最佳性能：避免对大量嵌套的 3D 元素同时进行动画；尽量使用 transform 和 opacity 进行动画（它们不触发重排）；避免在 3D 变换元素上使用 filter 或 box-shadow 等可能破坏 GPU 加速的属性；在不需要 3D 效果时及时使用 will-change: auto 释放合成层。在工具中，你可以自由测试不同的 3D 变换组合，为项目找到性能和效果的最佳平衡点。

CSS 3D 变换在实际项目中有广泛的应用场景。卡片翻转效果：常用于信息展示卡片，正面显示摘要，翻转后显示详细内容，使用 rotateY 实现。3D 轮播图：将多张图片排列在 3D 圆柱体上，通过旋转切换展示。立方体展示：六个面展示不同内容，自动旋转或交互式旋转。视差滚动：不同层级的元素以不同速度移动，创造深度感。按钮交互：点击按钮时通过 translateZ 和 scale 实现 3D 按压效果。页面过渡：利用 3D 旋转实现页面切换动画。使用工具时，先通过预设找到接近的效果，再微调参数，最后复制 CSS 代码应用到项目中。记得在实际项目中设置 transform-style: preserve-3d 和合适的 backface-visibility。

工具生成的 CSS 代码可以多种方式嵌入到项目中。最常用的方式是将代码粘贴到 CSS 文件中对应的类选择器内，然后在 HTML 元素上应用该类名。你也可以将代码作为内联样式直接写在 HTML 元素的 style 属性中，适合快速原型开发。对于需要动态变化的 3D 效果，可以将属性值设为 CSS 变量（如 --rotate-y），然后通过 JavaScript 动态修改变量值来实现动画。生成的代码包含所有必要的属性：transform-origin、perspective、perspective-origin 和 transform，通常还需要在容器上添加 transform-style: preserve-3d。建议在实际项目中根据具体需求调整 perspective 值和动画时长，以获得最佳的用户体验。

是的，多个 transform 函数的书写顺序会显著影响最终的视觉效果。CSS transform 函数从右到左依次应用（即最后一个函数最先执行）。例如，transform: rotateY(45deg) translateX(100px) 会先沿 X 轴平移 100px，然后再绕 Y 轴旋转 45 度；而 transform: translateX(100px) rotateY(45deg) 则会先旋转再平移，两者效果完全不同。这是因为旋转会改变坐标轴的方向，之后的平移会沿着旋转后的坐标轴进行。在工具中，你可以在生成的 CSS 代码中调整函数顺序来验证这一特性。建议在实际开发中，先平移后旋转（translate then rotate）是比较直觉的顺序。

没有显示透视效果通常有几个常见原因。第一，perspective 属性被错误地应用到了变换元素本身，而应该应用到其父元素上。第二，没有设置 transform-style: preserve-3d，导致子元素被扁平化。第三，perspective 的值设为 none 或未设置，此时没有透视投影。第四，在某些浏览器中，transform 属性中包含 translateZ(0) 等值可能触发 GPU 加速但也可能影响透视表现。第五，元素设置了 overflow: hidden，这会创建新的层叠上下文并可能影响 3D 效果。排查时，建议先在工具中验证参数是否正确，然后检查实际项目中的 CSS 继承和层叠关系，确保 perspective 和 transform-style 属性被正确应用。