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

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/

它之前没有用,因为你压倒了transform你的css.所以不是两者都做,而是做了最后一个.有点像你做了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/