rotateX(180deg)需父容器设transform-style: preserve-3d才能生效，否则退化为无效；建议父级用display: inline-block或block，配合transform-origin调整翻转轴心，并注意浏览器兼容性与多行文本渲染异常。
rotateX(180deg) 能让文字垂直翻转，但直接写会出错
直接对 <p> 或 <span> 应用 transform: rotateX(180deg) 通常没效果，甚至完全看不见文字——因为默认是 2D 渲染上下文，rotateX 属于 3D 变换，必须显式启用 3D 渲染环境。
关键点在于：父容器要加 transform-style: preserve-3d，否则子元素的 3D 变换会被压平成 2D，rotateX 就退化为无效操作。
- 只给目标元素加
rotateX(180deg)不够，必须同时确保其父级（至少一级）设置了transform-style: preserve-3d - 如果父容器是
display: inline（比如<span>），3D 变换可能被忽略；建议用display: inline-block或block -
backface-visibility: hidden不是必须项，但加上能避免翻转后背面文字“透底”或闪烁，尤其在 Chrome 中较常见
垂直翻转文字时，transform-origin 影响视觉锚点
默认以元素中心为旋转轴心，rotateX(180deg) 后文字会上下颠倒，但位置没变——看起来像“镜像翻转”，而非“绕顶部翻转”。若想让文字像书页一样从顶部向下翻折，就得改 transform-origin。
-
transform-origin: top center→ 绕顶部中点翻转，适合按钮/标签类元素 -
transform-origin: 0 0→ 绕左上角翻转，配合translateY()可微调起始位置 - 慎用百分比值（如
50% 50%）和绝对单位混用，容易因盒模型计算偏差导致错位
rotateX 在不同浏览器中的兼容性表现
现代浏览器（Chrome/Firefox/Safari/Edge）对 rotateX 支持良好，但有两个实际坑：
立即学习“前端免费学习笔记（深入）”；
- 旧版 Safari（≤14.1）对
transform-style: preserve-3d在 flex 容器内支持不稳定，建议外层用div+position: relative替代 - IE 完全不支持
rotateX，连带preserve-3d也无效；若需兼容 IE，只能降级用scaleY(-1)模拟翻转（但这是镜像，不是真正 3D 翻转） - 移动端 Safari 对
perspective值过小（如100px）易触发渲染抖动，建议设为500px起
文字垂直翻转后，行高与换行行为会异常
rotateX(180deg) 不改变 DOM 流布局，但视觉上文字倒置，会导致 line-height、vertical-align 和自动换行逻辑错乱——特别是多行文本，可能出现截断或重叠。
- 单行文本最稳妥；多行请包裹进固定高宽的
div，并设overflow: hidden - 避免在
rotateX元素上再设white-space: nowrap，否则可能撑破容器 - 若需保持可读性（比如翻转后仍希望用户能复制文字），不要用
writing-mode混合使用——二者叠加会进一步扰乱基线对齐
rotateX 不是独立生效的属性，它依赖整条渲染链路开启 3D 上下文**。少一个 transform-style，或者父容器用了 will-change: transform 却没配 preserve-3d，都会让翻转失效且无报错提示。 
