CSS定位实现倒影效果的另一种思路_利用scale与定位-css教程-PHP中文网

倒影必须是视觉副本而非原元素翻转，需用伪元素或cloneNode创建独立节点；::after实现需满足position:relative、content:""与显式尺寸、opacity+scaleY(-1)+transform-origin三个条件。

css定位实现倒影效果的另一种思路_利用scale与定位

用 `transform: scale(-1)` 翻转元素做倒影，为什么不能直接套用

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

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

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

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

目标元素必须有 position: relative，否则 ::after 无法精确定位
::after 必须设 content: "" 和显式尺寸（height / width），否则无渲染盒
透明度叠加要用 opacity，不能依赖背景色混合；且需加 transform: scaleY(-1) + transform-origin: top 确保从顶部翻转

div.reflect {
  position: relative;
}
div.reflect::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(transparent, rgba(0,0,0,0.2));
  transform: scaleY(-1);
  transform-origin: top;
  opacity: 0.6;
}