如何让网页显示镜面反射的效果，就是页面文字图片全部反转过来，和镜子里看一样！

Question

如何让网页显示镜面反射的效果，就是页面文字图片全部反转过来，和镜子里看一样！希望得到解决方法。

Answer 1

我猜楼主可能想要的是这种效果：

代码如下：

<style>
    .word_box {
      letter-spacing: -2px;
    }

    .rotate_span {
      display: inline-block;
      transform: rotateY(180deg);
    }
  </style>
  <div>
    镜子反射
  </div>
  <div class="word_box">
    <span class="rotate_span">镜</span>
    <span class="rotate_span">子</span>
    <span class="rotate_span">反</span>
    <span class="rotate_span">射</span>
  </div>

解析：
利用transform变形的旋转rotateY对文字进行绕Y周旋转

这里需要的是镜面反射，直接对整段文字进行旋转的话文字顺序会头尾调转，所以采取分割文字的做法
但是需要注意的是transform不对inline（即行内元素）起作用，故把文字转换成inline-block（行内块元素）