如何利用HTML的perspective属性实现网页景深透视效果？

本文共计996个文字，预计阅读时间需要4分钟。

HTML 本身没有景深概念，所谓景深效果，是指通过CSS和JavaScript技术实现的视觉效果，本质上是两种东西的混合使用：

perspective 不是景深，只是透视起点

很多人把 perspective 当成“加景深”，其实它只控制 3D 变换的视觉收缩基准点，和模糊无关。它必须设在父容器上，子元素才能感知这个“观察距离”：

• perspective: 800px 表示虚拟眼睛离容器平面 800px，值越小，旋转/平移时的纵深感越强；超过 2000px 就几乎看不出透视变形
• 不能写在要变形的元素自身上（比如 transform: perspective(800px) rotateY(30deg)），这会覆盖父级设置，且 Safari 下行为不稳定
• 如果子元素要用 3D 变换（如 translateZ()），父容器还得加 transform-style: preserve-3d，否则子元素会被拍平到同一平面

blur() 模拟虚化必须手动分层

浏览器无法从一张图里自动识别“人物在前、背景在后”，所有“景深虚化”都是靠人工切图或 DOM 分层实现的：

• 把前景（主体）、中景（过渡）、背景（远景）拆成不同 <div> 或 <img>，再分别设 filter: blur(0)、blur(4px)、blur(12px)
• 高 DPR 屏幕（如 Retina）下，blur(1px) 基本不可见，建议起手用 blur(2px) 以上，再按实际观感微调
• 边缘硬切会导致虚实交界生硬，可用 mask-image: radial-gradient(...) 或多层叠加渐变透明遮罩软化过渡（但兼容性差，iOS Safari 不支持 mask-image 径向渐变）

JS 动态控制虚化程度要注意坐标映射

蓝桥杯题型里常见的“鼠标悬停控制焦点”，核心不是模糊本身，而是把鼠标位置映射到深度梯度：

立即学习“前端免费学习笔记（深入）”；

• 监听 mousemove，用 event.clientX / window.innerWidth 算出归一化横坐标（0～1）
• 把这个值代入预设的模糊半径函数，比如 radius = Math.abs(x - 0.5) * 8，让中间清晰、两边渐虚
• 别直接改所有图片的 filter，而是用 element.style.filter = `blur(${radius}px)` 动态赋值，避免重排重绘开销过大
• 移动端需额外监听 touchmove，且注意 clientX 在 iOS 上可能为 0，应 fallback 到 touches[0].clientX

真景深只在 WebGL 场景里存在

如果你看到某个网页“自动识别景深”，那它一定不是纯 HTML/CSS 实现的：

• Three.js 的 DepthOfFieldPass 需要相机正确输出深度纹理，且每个 material 必须启用 depthTest: true，否则深度值全为 1
• WebGL 中的 WEBGL_depth_texture 扩展在 iOS Safari 上支持不一致，部分机型返回 null，必须用 gl.getExtension('WEBGL_depth_texture') 显式检测
• 单张 <img> 标签永远没有深度信息，所谓“AI 生成景深”其实是服务端预渲染好带 alpha 或 depth 通道的图，前端只是加载显示

最容易被忽略的一点：你做的不是“加景深”，而是在没有深度信号的前提下，用视觉线索（大小、模糊、遮挡）去暗示深度。用户信不信，取决于这三者是否自洽——比如中景元素既比前景小、又比背景模糊，才让人觉得它“在中间”。