html – 用css水平垂直翻转图像

我试图翻转一个图像显示它4种方式：原始(无变化),水平翻转,垂直翻转,垂直翻转.

要做到这一点,我做下面的工作,除了水平垂直的翻转,工作正常,任何想法为什么这不会工作？

我在这里做了一个JS小提琴：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中的变换.所以,而不是做这两个,它只是做了最后一个.如果你做了背景颜色两次,就会覆盖第一个.