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

Question

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

为此，我正在执行以下操作，除了水平 + 垂直翻转外效果很好，知道为什么这不起作用吗？

我在这里做了一个 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";
}

Answer 1

您只能为任何选择器应用一个转换规则。使用

.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 2

试试这个：

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

已更新 fiddle：https://jsfiddle.net/7vg2tn83/1/

它之前没有工作，因为您覆盖了 css 中的 transform。因此，它没有同时执行这两项操作，而是执行了最后一项。有点像如果你做了两次 background-color，它会覆盖第一次。

Answer 3

你可以做一个transform: rotate(180deg);水平+垂直翻转。

Answer 4

要执行反射，您可以使用以下格式的变换 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/

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

Flip / mirror an image horizontally + vertically with css

html

css

transform

css-filters