Переверните / зеркало изображение горизонтально + вертикально с CSS ⇐ Html

[Anonymous]

Я пытаюсь перевернуть изображение, чтобы отобразить его 4 способа: оригинал (без изменений), перевернут горизонтально, перевернулся вертикально, перевернулся горизонтально + вертино. < /p>

Чтобы сделать это, я делаю ниже, он работает нормально от флип -горизонтали + вертикально, какая -либо идея, почему это не будет работать? < /p>

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";
}


Подробнее здесь: https://stackoverflow.com/questions/328 ... y-with-css