用 transform: rotate3d() 实现图片真 3D 旋转需同时满足：父容器设 perspective，直接父级设 transform-style: preserve-3d，图片自身用 rotate3d(x,y,z,deg) 并确保块级显示。
用 transform: rotate3d() 实现图片绕任意轴旋转
直接上核心：图片 3D 旋转靠的是 CSS 的 transform + rotate3d()，不是 rotateX() 单独用就能“自动立体”的。浏览器默认把元素压平在 Z=0 平面，不加 transform-style: preserve-3d 和 perspective，你写的 3D 变换会被强行拍成 2D 效果——看着像转，其实只是缩放+倾斜的假象。
常见错误现象：rotate3d(1,1,0,45deg) 写了但图片没“翻出来”，边缘没透视收缩，转起来像贴纸在平面上滑动。
-
perspective必须设在父容器上（比如<div class="stage">），不能只加在图片自己身上 -
transform-style: preserve-3d要加在有子元素且子元素要做 3D 变换的父级上（通常是同一层） - 图片本身得是块级或设
display: block，否则 inline 元素的 transform 行为不稳定 - 动画要用
@keyframes配transform，别试图用 JS 每帧改style.transform做连续旋转——卡顿明显，尤其低端设备
让旋转“有纵深感”的三个必要 CSS 属性
缺一不可，顺序和作用对象都不能错：
-
perspective: 800px：写在旋转容器的父级（如 body 或 wrapper），数值越小，透视越夸张；超过 1200px 就接近无透视 -
transform-style: preserve-3d：写在直接包裹图片的容器上（比如<figure>），告诉浏览器“我下面的子元素要真 3D” -
transform: rotate3d(1, 1, 0, 360deg)：写在图片自身，四个参数分别是 X/Y/Z 轴方向向量 + 角度，(1,1,0)是沿对角线旋转，(0,1,0)才是绕 Y 轴竖着翻
典型结构示例：
立即学习“前端免费学习笔记（深入）”；
<div class="scene" style="perspective: 800px;">
<div class="card" style="transform-style: preserve-3d;">
<img src="a.jpg" style="transform: rotate3d(0,1,0,45deg);">
</div>
</div>
rotate3d() 参数怎么填才不懵
很多人被 rotate3d(x, y, z, a) 四个数劝退。其实 x/y/z 不是坐标，是「旋转轴的方向向量」，只要方向对，长度无所谓（浏览器会自动归一化）。记住这几个常用组合：
- 绕 X 轴翻滚（上下翻）：用
rotate3d(1, 0, 0, 360deg) - 绕 Y 轴旋转（左右翻牌）：用
rotate3d(0, 1, 0, 360deg) - 绕 Z 轴转（就是普通 2D 旋转）：用
rotate3d(0, 0, 1, 360deg) - 斜着翻（比如封面翻页效果）：用
rotate3d(1, 1, 0.3, 360deg)，Z 分量加点值会让翻转带点“翘起”感
注意：如果 x/y/z 全为 0（如 rotate3d(0,0,0,360deg)），整个声明无效，浏览器直接忽略。
动画卡顿、边缘锯齿、移动端失效的常见原因
写了 3D 旋转，但实际跑起来掉帧、图片边缘发虚、iOS 上完全不动？大概率栽在这几个点上：
- iOS Safari 对
preserve-3d支持有限，特别是嵌套多层时；保险做法是只在一层容器上用preserve-3d，图片直接子元素，别再套 div - 图片没设
backface-visibility: hidden，翻到背面时可能显示残影或闪烁（尤其 JPG 有 alpha 通道问题时） - 动画用
left/top位移驱动，而不是transform——这会触发重排，必然卡；必须全程用transform+will-change: transform提示渲染器 - 大图没压缩，GPU 纹理上传慢，首帧延迟高；建议用
image-rendering: -webkit-optimize-contrast（Safari）或image-rendering: crisp-edges控制缩放质量
真正难的不是写出来，是让不同设备都“看起来像那么回事”。很多细节比如 perspective-origin 默认居中，但你想让旋转焦点偏上，就得手动调；这些偏移量往往要靠反复试，没有通用值。
