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

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

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

代码如下：

<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（行内块元素）

            <div>我是好人</div>
            <div style="transform: rotateX(180deg)">我是好人</div>
            <div style="transform: rotateY(180deg)">我是好人</div>
            <div style="transform: rotateZ(180deg)">我是好人</div>
            <div style="direction:rtl; unicode-bidi:bidi-override">我是好人</div>

镜面也就是反转把
transform:rotateZ(180deg);

html{
  transform: rotateY(180deg)
}

transform:rotateZ(180deg);或者transform: rotateY(180deg)

*{  transform: rotateY(180deg)}

别忘记用完去掉悬浮

<div style="float:left;">拿来吧你</div>
<div style="transform: rotateY(180deg);float:left">拿来吧你</div>