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

【问题标题】：Flip / mirror an image horizontally + vertically with css使用css水平+垂直翻转/镜像图像
【发布时间】：2015-12-28 19:20:52
【问题描述】：

我试图翻转图像以 4 种方式显示它：原始（无更改）、水平翻转、垂直翻转、水平翻转 + 垂直。

要做到这一点，我正在执行以下操作，除了水平+垂直翻转之外，它工作正常，知道为什么这不起作用吗？

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

【问题讨论】：

标签： html css transform css-filters

【解决方案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，它会覆盖第一次。

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

您可以为水平+垂直翻转执行transform: rotate(180deg);。

【讨论】：

这仅适用于对称图像。因为你会旋转而不是翻转图像。例如：取字母 (d)。旋转：d |页。翻转：d | b.
@warkentien2 按照 OP 的要求将其水平+垂直翻转。

【解决方案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 会接受多个过滤器。

【讨论】：

对于IE9，可以使用-ms-transform: scale(-1, -1);