使用 css 水平+垂直翻转/镜像图像

Question

我尝试翻转图像以四种方式显示：原始（无变化）、水平翻转、垂直翻转、水平+垂直翻转。

为了做到这一点，我做了下面的事情，除了水平+垂直翻转之外，它工作得很好，知道为什么这不起作用吗？

我在这里用 JS 解决了这个问题：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";
}

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

，它会覆盖第一个。

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 小提琴是 https://jsfiddle.net/n20196us/1/

Answer 3

您可以执行

transform: rotate(180deg);

进行水平+垂直翻转。

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 会接受多个过滤器。

Answer 5

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

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

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