CSS制作镜面文字

制作镜面文字的方法

使用CSS的transform属性可以实现镜面文字效果。通过scaleX(-1)或scaleY(-1)对文本进行水平或垂直翻转。

.mirror-text {
  transform: scaleX(-1);
  display: inline-block;
}

结合伪元素创建对称镜面效果

可以通过伪元素（如::before或::after）生成镜面文字，形成对称效果。

.mirror-symmetric {
  position: relative;
  display: inline-block;
}
.mirror-symmetric::after {
  content: attr(data-text);
  position: absolute;
  left: 100%;
  transform: scaleX(-1);
  margin-left: 10px; /* 调整间距 */
}

渐变增强立体感

为镜面文字添加透明度或渐变效果，模拟真实镜面反射的视觉衰减。

.mirror-fade::after {
  opacity: 0.6;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
}

动画交互效果

通过CSS动画让镜面文字产生动态交互，比如悬停时放大。

.mirror-animate:hover {
  transform: scaleX(-1) scale(1.2);
  transition: transform 0.3s ease;
}

实际应用示例

HTML结构：

<span class="mirror-text">Hello World</span>
<div class="mirror-symmetric" data-text="Symmetry"></div>

完整效果需将上述CSS与HTML结合使用。scaleX(-1)实现水平翻转，scaleY(-1)实现垂直翻转。通过调整伪元素的位置和样式可控制镜面文字的对齐方式和视觉效果。