Question

我试图翻转图像以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";
}

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: rotate(180deg);。

Answer 3

要执行可以使用的反射，变换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 4

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

void add(unsigned long element, unsigned long **multipliers) {
    …
    n_vector = realloc(*multipliers, sizeof(unsigned long) * size);
    if (n_vector == NULL) {
        … // error handling
    } else {
        *multipliers = n_vector;
    }
}

void compute() {
     …
     add(x, &multipliers);
     …
}

我不确定哪个IE会接受多个过滤器。

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

4 个答案: