HTMLtransform3D变换的格式属性和透视效果设置方法

掌握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 轴上的“远近”视觉效果，类似于人眼观察真实世界的方式。

比格设计

比格设计是135编辑器旗下一款一站式、多场景、智能化的在线图片编辑器

124

查看详情

• 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 函数和透视设置，就能在网页中创建出自然、生动的三维交互效果。