用途：3D UI 是一份 UI 实现指南，用于打造存在于三维、可旋转空间中的界面，适合希望界面元素具备真实深度、透视与空间纵深感的需求。它是 design-it 技能的子参考（child reference），资料明确说明不应直接触发。
核心原则：真实深度，即元素沿 Z 轴靠近或远离相机，而非仅有阴影；透视，用 CSS perspective 或 WebGL 构建真实灭点；交互旋转，元素随鼠标移动或设备陀螺仪在 3D 空间中倾斜旋转。视觉特征上，推荐高对比色板（如 Midnight Luxury、Industrial Chic）以凸显几何形状，字体可用粗体、块状或挤出效果，图标可改用渲染好的 3D 资源（.glb、.gltf 或高分辨率 3D 物体 PNG）。
Web 实现：主要依赖 perspective、transform-style: preserve-3d 与 rotateX/rotateY，配合 hover 状态与 translateZ 让内部元素“弹出”。
App 实现：资料给出四个平台的做法。SwiftUI 用 .rotation3DEffect()，其 perspective 参数（默认 1/6，越大畸变越强）控制相机距离，旋转轴可绑定拖拽手势或 CoreMotion 陀螺仪。Flutter 用 Matrix4.identity()..setEntry(3, 2, 0.001) 建立透视，在 Transform 中应用 X、Y 轴旋转，并用 TweenAnimationBuilder 平滑回弹。React Native 对 UI 透视使用 transform 数组 [{ perspective: 1000 }, { rotateX }, { rotateY }]，资料强调 perspective 必须是数组第一项才能正确渲染；真正的 3D 模型需要 react-three-fiber。Jetpack Compose 在 Modifier.graphicsLayer { } 中设置 rotationX、rotationY，并必须设置 cameraDistance 建立 Z 轴灭点，常用起点为 8f * density。
注意事项：应把 3D 旋转绑定到用户输入（网页鼠标移动、移动端设备倾斜）以取得最佳效果；除非是超大标题，不要将文字本身做成 3D，小尺寸下通常不可读。
限制：这是一份样式参考，不能替代针对具体环境的验证、无障碍测试或专家评审；对比度与响应式行为需另行确认。资料未提供该技能的价格、收费、性能数据或其他使用步骤，暂未提供。