transform: rotatex() 没效果是因为未启用3d渲染上下文，需父容器设 perspective 并配合 transform-style: preserve-3d，且子元素自身应用3d变换。
transform: rotateX() 为什么没效果？
因为 transform 的 2D 和 3D 是两套独立坐标系，直接写 rotateX(45deg) 在默认的 2D 渲染上下文中会被忽略——浏览器压根不启用 3D 渲染管线。
必须显式开启 3D 上下文，最常用的是给父容器加 transform-style: preserve-3d，同时确保该容器本身有 3D transform（哪怕只是 translateZ(0)）或其父级启用了 perspective。
常见错误现象：
- 元素“不动”或只发生 2D 旋转
- 控制台无报错，但视觉毫无 3D 感
- 在 Chrome DevTools 的“3D 视图”面板里看不到层级结构
- 父容器必须设置
perspective（推荐 800px–1200px），值太小会导致畸变，太大则看不出深度 -
transform-style: preserve-3d必须加在直接包含子元素的容器上，不能只加在最外层 body - 子元素自身的
transform才能真正参与 3D 空间计算，比如rotateY(60deg)或translateZ(50px)
perspective 和 transform: perspective() 的区别
二者都提供景深，但作用对象和继承性完全不同：前者是 CSS 属性，作用于容器，让它的所有子元素共享同一透视投影；后者是 transform 函数，只影响当前元素自身，且会创建新的层叠上下文和渲染上下文。
使用场景：
- 做卡片翻转、立方体旋转 → 用容器级 perspective
- 单个按钮悬停带轻微立体感 → 可用 transform: perspective(600px) rotateX(10deg)
性能影响：
- 多层嵌套 transform: perspective() 容易触发过多合成层，增加内存占用
- perspective 属性本身不触发重排，但搭配 preserve-3d 后，每个子元素的 3D 变换都会走 GPU 合成路径
- 优先用
perspective: 1000px配合transform-style: preserve-3d，更可控 - 避免在滚动区域频繁变化
perspective值，容易卡顿 -
transform: perspective()无法让子元素获得 3D 空间关系，仅改变自身投影
rotate3d() 参数怎么记才不晕？
rotate3d(x, y, z, a) 不是直角坐标轴上的旋转角度，而是绕一个**向量方向**旋转。x/y/z 是归一化方向向量的分量，a 才是角度。比如 rotate3d(1, 1, 0, 45deg) 表示绕从原点指向 (1,1,0) 的那条斜线转 45 度。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 写 rotate3d(1, 0, 0, 45deg) 等价于 rotateX(45deg)，但前者多一次向量归一化计算（轻微性能开销）
- x/y/z 全为 0 时整个函数失效（除零错误，浏览器静默忽略）
- 混用 rotateX 和 rotate3d 时顺序敏感，CSS transform 是右乘，顺序不同结果可能差异很大
- 日常开发优先用
rotateX/rotateY/rotateZ，语义清晰、调试直观 - 需要斜向旋转（如对角翻转）再上
rotate3d，并用工具验证方向向量是否已归一化（例如rotate3d(1, 1, 0, 45deg)实际等价于rotate3d(0.707, 0.707, 0, 45deg)） - 不要依赖
rotate3d实现动画关键帧的平滑插值——不同向量间的插值是非线性的，可能抖动
backface-visibility: hidden 到底要不要加？
它控制元素背面是否可见。3D 旋转超过 90° 后，原本朝前的面会转向后方；若不设 backface-visibility: hidden，背面内容仍会渲染（镜像翻转），可能遮挡其他元素或暴露不该显示的内容。
使用场景：
- 卡片翻转（正面/背面切换）→ 必须加
- 立方体六个面 → 每个面都要加，否则内部面会透出来
- 单面旋转动画（如菜单弹出）→ 可不加，但需确认不会翻过 180°
兼容性注意：
- IE10+、Edge 12+、Chrome/Safari/Firefox 均支持
- 在部分安卓 WebView（如旧版 Crosswalk）中存在渲染异常，建议配合 transform: translateZ(0) 强制硬件加速
- 只要涉及“翻转”动作，统一加上
backface-visibility: hidden，成本低、收益高 - 它不会隐藏元素本身，只隐藏该元素在 3D 空间中朝向摄像机背面的那一面
- 不要误以为它能解决 Z-index 层级问题——3D 渲染顺序由最终变换后的 Z 值决定，不是 CSS 层叠上下文
事情说清了就结束。3D 效果是否成立，不取决于你写了几个 rotate，而在于 perspective 是否生效、preserve-3d 是否挂对位置、以及 backface 是否关到位——这三个点漏掉任何一个，页面看起来都还是平的。
