HTML本身不支持三维动画，但结合CSS 3D变换（如rotateX/Y/Z）和@keyframes可实现图片流畅三维旋转；需设置perspective启用3D上下文、transform-origin控制原点，并用动画驱动角度变化。
HTML 本身不直接支持三维动画，但结合 CSS 的 3D 变换（transform: rotateX/Y/Z） 和 @keyframes，就能让图片实现流畅的三维旋转效果。关键在于启用 3D 渲染上下文、设置合适的变换原点，并用动画控制角度变化。
启用 3D 空间与透视
要在页面中看到真正的三维效果，父容器需设置 perspective（透视距离），让浏览器知道“从多远看这个 3D 场景”。同时，图片自身要开启 transform-style: preserve-3d（若它有子元素）；但对单张图片，只需确保其父级有 perspective，且自身启用 3D 变换即可。
常见写法：
- 给图片的直接父容器（比如一个 div）加 perspective: 1000px;
- 给图片本身加 transform-style: preserve-3d;（非必需，但利于后续扩展）
- 必须设置 transform-origin: center;（默认就是居中，但显式声明更稳妥）
定义三维旋转动画
使用 @keyframes 定义从 0° 到 360° 的连续旋转。可单独绕 X、Y、Z 轴转，也可组合（如 rotateX(30deg) rotateY(45deg)）。
立即学习“前端免费学习笔记（深入）”；
示例：绕 Y 轴匀速自转
@keyframes spin3D {
from { transform: rotateY(0deg); }
to { transform: rotateY(360deg); }
}
img {
animation: spin3D 4s infinite linear;
}
注意：rotateX/Y/Z 是独立轴向旋转，顺序会影响最终朝向（CSS 中按书写顺序执行）。想实现“立体翻转球体感”，常用 rotateX(45deg) rotateY(45deg) 起始姿态，再叠加动画。
增强真实感的小技巧
纯旋转容易显得“飘”，加点视觉反馈会更自然：
- 给图片加 box-shadow: 0 10px 30px rgba(0,0,0,0.2); 模拟投影
- 设置 backface-visibility: hidden; 防止背面内容在翻转时意外显示（尤其做卡片翻转时）
- 用 will-change: transform; 提示浏览器提前优化渲染性能（适合复杂或高频动画）
兼容性与注意事项
现代浏览器（Chrome/Firefox/Safari/Edge）均支持 CSS 3D transform，但 IE11 仅部分支持，iOS Safari 旧版本需加 -webkit- 前缀（现在基本可省略）。务必测试移动端触摸后是否意外触发缩放——可在 head 中加：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
另外，避免在 body 或大容器上滥用 perspective，否则所有子元素都受透视影响，应尽量作用于最小必要父容器。
