[解決済み] cssで画像を水平・垂直に反転・鏡面化する。

質問

画像を反転させて、オリジナル（変更なし）、水平反転、垂直反転、水平＋垂直反転の4通りに表示したいのですが、どのようにすればよいですか？

これを行うには、私は以下のことをやって、それは水平+垂直方向に反転することを除いて正常に動作します、これは動作しないであろう任意のアイデア？

Iveはここで問題の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/

をオーバーライドしていたため、以前はうまくいきませんでした。 transform をCSSに追加してください。だから両方やるのではなく 最後の1つだけをやるのです。例えば background-color を2回実行すると、1回目を上書きしてしまうのです。