javascript - 什么CSS/JS技巧驱动镜像倒http ://com. google愚人节页面？

Question

也许你看到了搞笑的https://com.google/ Google.com 的倒置镜像(实际上是功能性的)版本。我只是简单地查看了它的源代码，但无法完全弄清楚正在发挥作用的核心编程技巧是什么让它起作用。

Google 的人似乎在 i-frame 中加载了常规的 google.com 页面，但是那又怎样呢？谁能解释一下他们是如何做到这一点的？

Answer 1

两个CSS规则的组合:

.text {
    transform: rotateY(180deg);
    text-align: right;
}

<div class="text">Reverse me</div>

UPD:用于实际 com.google 页面兼容性的规则:

body {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}