什么CSS/JS技巧驱动镜像反转http://com.google愚人节页面

What CSS / JS tricks drive the mirror inverted http://com.google April fools page?

本文关键字：com google http 愚人节 镜像 JS CSS 什么      更新时间：2023-09-26

也许你看到了山丘https://com.google/镜像反转（实际上是功能性的）版本的Google.com。我只是简单地看了一下它的来源，但不太清楚是什么核心编程技巧让它发挥作用。

谷歌的人似乎把谷歌的常规页面加载到i框架中，但后来呢？有人能解释一下他们是怎么做到的吗？

两个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";
}

在布局中使用变换来产生镜像效果

谷歌使用

.mirror {
    transform: rotateY(180deg);
}

但也可以使用

.mirror {
    transform: scale(-1, 1);
}
相关文章：