使用CSS水平和垂直翻转/镜像图像

Question

我想翻转一张图片，使其呈现四种不同的方式：原图（未做任何改变），水平翻转，垂直翻转，水平和垂直翻转。

为此，我正在使用以下代码，除了水平和垂直翻转之外，其他都可以正常工作。不知道这是为什么？

我已经在这里创建了一个JS fiddle演示问题：https://jsfiddle.net/7vg2tn83/

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

.img-vert {
        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

.img-hor-vert {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";

        -moz-transform: scaleY(-1);
        -o-transform: scaleY(-1);
        -webkit-transform: scaleY(-1);
        transform: scaleY(-1);
        filter: FlipV;
        -ms-filter: "FlipV";
}

- sam

Answer 1

试一下这个：

.img-hor-vert {
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    -webkit-transform: scale(-1, -1);
    transform: scale(-1, -1);
}

更新的示例代码：https://jsfiddle.net/7vg2tn83/1/

之前没有起作用是因为您在CSS中覆盖了transform。因此，它只执行最后一个而不是两个。有点像如果您两次使用background-color，它将覆盖第一个。

- Platte Gruber

Answer 2

要执行反射，您可以使用 transform CSS 属性以及以此格式编写的 rotate() CSS 函数：

transform: rotateX() rotateY();

函数rotateX()将元素沿着x轴旋转，而函数rotateY() 将元素沿着y轴旋转。我认为我的方法很直观，因为人们可以在脑海中想象旋转的过程。在您的示例中，使用我的方法得出的解决方案如下：

.img-hor {
  transform: rotateY(180deg); // Rotate 180 degrees along the y-axis
}

.img-vert {
  transform: rotateX(180deg); // Rotate 180 degrees along the x-axis
}

.img-hor-vert {
  transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both
}

展示解决方案的JS fiddle网址为https://jsfiddle.net/n20196us/1/

- Edmond Weiss

Answer 3

您可以使用transform: rotate(180deg);实现水平和垂直翻转。

- Frank Rem

---

这只适用于对称图像，因为你将旋转而不是翻转图像。例如：取字母（d）。旋转：d | p。翻转：d | b。 - warkentien2

按照 OP 的要求，将其水平和垂直翻转。 - Frank Rem

Answer 4

您只能为任何选择器应用单个变换规则。 使用：

.img-hor-vert {
    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);
    filter: FlipH FlipV;
    -ms-filter: "FlipH FlipV";
}

我不确定哪个IE浏览器可以接受多个过滤器。

- Victor - Reinstate Monica

---

对于IE9，您可以使用-ms-transform: scale(-1, -1);。 - Victor - Reinstate Monica

Answer 5

这个类也适用于图像标签。

.box {
  font-size: 40px;
  font-weight: 600;
  display: inline-block;
  background: #eee;
  padding: 10px;
  min-width: 200px;
  text-align: center;
}

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

.flipV {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
}

<span class="box">
  Original
  <br />
  \(*.^)c
</span>

<hr />

<span class="box flipH">
  Flip H
  <br />
  \(*.^)c
</span>

<span class="box flipV">
  Flip V
  <br />
  \(*.^)c
</span>

- GMKHussain

Answer 6

使用TailWindCSS，您可以水平和垂直翻转图像。

/* Flip horizontally */
<img src="..." alt="..." class="transform -scale-x-100">

/* Flip vertically */
<img src="..." alt="..." class="transform -scale-y-100">

- Dhamith Kumara