如何通过CSS scale和定位技巧实现元素的倒影效果？

本文共计797个文字，预计阅读时间需要4分钟。

因为单纯的翻转会将整个元素（包括内容、事件区域、滚动方向）一起倒过来，用户点击倒影实际点中的是原元素顶部的部分，滚动也会反向。倒影必须是视觉副本，不涉及交互、不干扰布局。

• 必须用 cloneNode() 或伪元素生成独立副本，不能只靠 transform 操控原元素
• scale(-1) 要配合 transform-origin 控制翻转基点，否则倒影位置偏移严重
• 父容器需设 overflow: hidden，否则翻转后的内容可能溢出可见区

伪元素 ::after 实现倒影的三个硬性条件

这是最轻量、兼容性最好的方式，但容易因遗漏关键样式导致倒影不显示或错位。