本文介绍一种更可靠、语义更清晰的方案：使用 CSS writing-mode: vertical-rl 替代 transform: rotate(-90deg)，配合 transform: scale(-1) 实现镜像翻转，使文字自然垂直居右显示，避免旋转导致的定位错乱与响应式失效问题。
本文介绍一种更可靠、语义更清晰的方案：使用 CSS `writing-mode: vertical-rl` 替代 `transform: rotate(-90deg)`，配合 `transform: scale(-1)` 实现镜像翻转，使文字自然垂直居右显示，避免旋转导致的定位错乱与响应式失效问题。
在构建响应式图片轮播时，常需为每张图添加侧边标题（如垂直排布于右边缘）。许多开发者第一反应是用 transform: rotate(-90deg) 配合绝对定位，但该方式存在明显缺陷：旋转后元素的坐标系发生改变（宽高互换、方向翻转），导致 top/right 等属性行为反直觉，调试困难且难以适配不同屏幕尺寸。
推荐方案：用 writing-mode + scale(-1) 实现真正“垂直右置”
CSS 的 writing-mode: vertical-rl 可将文本流设为从上到下、从右到左（即中文竖排传统方向），此时 <p></p> 元素天然占据容器右侧垂直空间。再通过 transform: scale(-1) 水平翻转，即可获得与 rotate(-90deg) 视觉一致但定位稳定的垂直标题——所有盒模型属性（top/right/inset）仍按原始坐标系工作，精准可控。
✅ 关键代码解析：
.slide-text {
position: absolute;
top: 0; /* 顶部对齐 */
bottom: 0; /* 底部拉满 */
right: 0; /* 紧贴右侧边界 */
writing-mode: vertical-rl; /* 垂直书写模式 */
transform: scale(-1); /* 水平翻转，使文字正向可读 */
background-color: #ff0000;
color: white;
text-align: center; /* 垂直方向上的“居中”（即水平居中） */
font-size: 1.5rem;
margin: 0; /* 清除默认段落外边距 */
}? 注意事项：
-
inset: 0替代冗余定位：.slide-element-2, .slide-element-3中使用inset: 0（等价于top:0; right:0; bottom:0; left:0）更简洁，兼容现代浏览器； -
图片自适应增强：为
.slide-image添加height: 100%; object-fit: cover;，确保不同比例图片在容器内完整覆盖且不失真； -
动画无需修改：原有
@keyframes和animation逻辑完全保留，slide-text会随父容器一同淡入淡出； -
兼容性提示：
writing-mode在所有现代浏览器（Chrome 48+, Firefox 41+, Safari 12.1+, Edge 79+）中已原生支持；如需兼容 IE11，可回退至transform: rotate(-90deg)并配合transform-origin精调（但不推荐）。
? 进阶建议：若需支持多语言（如英文标题过长），可为 .slide-text 添加 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 实现单行截断，并设置固定宽度（如 width: 2.5rem）控制垂直空间占用。
此方案摒弃了旋转带来的布局不确定性，以语义化 CSS 实现精准、可维护、响应式的垂直标题布局，是轮播组件 UI 增强的推荐实践。
