掌握transform属性中的3D函数与perspective设置，可实现元素在三维空间的旋转、平移、缩放；通过translate3d、rotate3d、scale3d等函数组合变换，结合perspective定义透视距离，配合transform-style: preserve-3d和backface-visibility: hidden，构建真实立体效果。
在使用 HTML 和 CSS 实现 3D 变换时，关键在于掌握 transform 属性中的 3D 函数以及 perspective（透视）的设置方式。这些属性能让元素在三维空间中旋转、平移、缩放，并产生逼真的立体视觉效果。
transform3D 常用格式属性
CSS 的 transform 属性支持多种 3D 变换函数，通过组合使用可实现丰富的立体动画效果。
• translate3d(x, y, z)：在 X、Y、Z 轴方向上同时移动元素。也可单独使用 translateX()、translateY()、translateZ()。 • rotate3d(x, y, z, angle)：定义一个 3D 旋转轴并绕其旋转指定角度。常用简写如 rotateX()、rotateY()、rotateZ() 分别绕对应轴旋转。 • scale3d(sx, sy, sz)：在三个维度上缩放元素。scaleZ() 通常需结合其他变换才可见效果。 • matrix3d()：使用 4×4 齐次矩阵进行复杂变换，适用于高级场景，一般较少手动编写。
示例：
transform: rotateX(45deg) rotateY(30deg) translateZ(50px);
该样式使元素先绕 X 轴倾斜 45 度，再绕 Y 轴旋转 30 度，最后沿 Z 轴向前移动 50 像素。
立即学习“前端免费学习笔记（深入）”；
透视效果（perspective）的设置方法
要让 3D 变换具有深度感，必须设置透视距离。透视决定了元素在 Z 轴上的“远近”视觉效果，类似于人眼观察真实世界的方式。
• perspective 属性：应用于被变换的元素本身或其父容器，定义观察者与 Z=0 平面之间的距离（单位为 px）。值越小，透视效果越强烈。 • perspective-origin：设定透视观察的原点位置，默认为 center。可设为 left、right 或具体坐标，影响视角方向。
两种常见设置方式：
1. 在父容器上设置 perspective，子元素进行 3D 变换： .container { perspective: 800px; } .box { transform: rotateY(45deg); transform-style: preserve-3d; } 2. 直接在元素上使用 perspective() 函数作为 transform 的一部分： .box { transform: perspective(800px) rotateY(45deg); }
推荐将 perspective 设在父级，这样多个子元素能共享统一的透视环境，避免视觉错乱。
辅助属性：transform-style 与 backface-visibility
• transform-style: preserve-3d：确保子元素也处于 3D 空间中，而不是扁平化渲染。若父元素有 3D 变换且包含子元素，应设置此属性。 • backface-visibility: hidden：控制元素背面是否可见。当元素翻转 180 度时，隐藏背面对提升真实感很有帮助。
例如制作一个翻转卡片效果时，设置 backface-visibility: hidden 可防止看到反面内容直到正确角度。
基本上就这些。合理搭配 transform3D 函数和透视设置，就能在网页中创建出自然、生动的三维交互效果。