使用CSS水平/垂直翻转/镜像图像 [英] Flip / mirror an image horizontally + vertically with css

问题描述

我正在尝试翻转图像以4种方式显示:原始(无变化)，水平翻转，垂直翻转，水平+垂直翻转.

Im trying to flip an image to display it 4 ways : original (no changes), flipped horizontally, flipped vertically, flipped horizontally + verticly.

要执行此操作，请执行以下操作，除了水平+垂直翻转之外，它还可以正常工作，知道为什么它不起作用吗?

To do this Im doing the below, it works fine apart from the flip horizontally + vertically, any idea why this wouldnt be working ?

我在这里做了一个JS小提琴: https://jsfiddle.net/7vg2tn83/

Ive made a JS fiddle of the issue here : 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";
}

推荐答案

尝试一下:

.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一样，它将覆盖第一个.

It wasn't working before because you were overriding the transform in your css. So instead of doing both, it just did the last one. Sort of like if you did background-color twice, it would override the first one.

这篇关于使用CSS水平/垂直翻转/镜像图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！