HTML5本身不支持滤镜或3D渲染，3D立体效果需依赖CSS3的transform、perspective和transform-style:preserve-3d等属性协同实现，缺一不可。
HTML5 本身没有“滤镜”概念，3D 效果靠 CSS transform 和 perspective
HTML5 是一套标记语言规范，不提供图形滤镜或 3D 渲染能力。所谓“HTML5 滤镜实现 3D 立体”，实际是用 CSS3 的 3D 变换属性在浏览器中模拟立体感，核心依赖 transform（含 rotateX、rotateY、translateZ）和容器级的 perspective。Canvas 或 WebGL 才能真正做 3D 渲染，但那是 JS 层面的事，不是 HTML5 标签或纯 CSS 能搞定的。
CSS 实现基础 3D 立体效果的必要条件
缺一不可，否则看起来就是平的、卡顿、或完全没反应：
-
perspective必须加在父容器上（如div），不能只写在子元素的transform里 —— 否则无景深，无立体感 - 子元素需启用 3D 上下文：
transform-style: preserve-3d，否则子元素的 Z 轴变换会被拍平 - 触发硬件加速：给元素加
transform: translateZ(0)或will-change: transform，避免闪烁/掉帧 - 注意默认
overflow: visible会导致 3D 元素溢出裁剪，必要时设overflow: hidden
常见错误：写了 rotateY(45deg) 却看不出 3D 效果
这是最常踩的坑。单纯旋转不等于立体 —— 缺少观察视角，旋转只是平面扭曲。必须配合：
- 父容器设置
perspective: 1000px（数值越小，透视越夸张；太大则像没透视） - 子元素有足够 Z 轴位移，比如
transform: rotateY(45deg) translateZ(50px)，让不同部分离视点距离不同 - 别忘了
transform-style: preserve-3d在父容器上，否则translateZ无效 - 检查是否被祖先元素的
overflow: hidden或transform截断了 3D 渲染上下文
一个可直接运行的最小 3D 立体卡片示例
复制到 HTML 文件中即可看到带透视的翻转效果：
立即学习“前端免费学习笔记（深入）”；
<div style="perspective: 1200px; width: 200px; height: 200px;">
<div style="width: 100%; height: 100%; background: #4a90e2;
transform-style: preserve-3d;
transform: rotateY(30deg) translateZ(20px);
will-change: transform;">
</div>
</div>
关键点：没有 perspective 的父容器，translateZ(20px) 就只是个无效值；没有 preserve-3d，rotateY 会降维成 2D 旋转；will-change 不是必须，但在动画中能显著减少卡顿。
真要搞复杂 3D（如多面体、光影、贴图），得用 Three.js 或原生 WebGL —— CSS 3D 只适合简单立体示意，且兼容性在旧版 Safari 和 IE 中问题很多。
