Перевернуть/отразить изображение по горизонтали и вертикали с помощью CSS ⇐ CSS

[Anonymous]

Я пытаюсь перевернуть изображение, чтобы отобразить его четырьмя способами: исходное (без изменений), перевернутое по горизонтали, перевернутое по вертикали, перевернутое по горизонтали и вертикали.

Чтобы сделать это, я делаю следующее, все работает нормально, за исключением переворота по горизонтали и вертикали. Есть идеи, почему это не работает?

Я сделал JS-скрипт этой проблемы здесь: https://jsfiddle.net/7vg2tn83/
.img-hor { -moz-transform: масштабX(-1); -o-преобразование: масштабX(-1); -webkit-transform: ScaleX(-1); преобразование: масштабX(-1); фильтр: FlipH; -ms-фильтр: «FlipH»; } .img-vert { -moz-transform: масштабY(-1); -o-преобразование: масштабY(-1); -webkit-transform: масштабY(-1); преобразование: масштабY(-1); фильтр: ФлипВ; -ms-фильтр: «FlipV»; } .img-hor-vert { -moz-transform: масштабX(-1); -o-преобразование: масштабX(-1); -webkit-transform: ScaleX(-1); преобразование: масштабX(-1); фильтр: FlipH; -ms-фильтр: «FlipH»; -moz-transform: масштабY(-1); -o-преобразование: масштабY(-1); -webkit-transform: масштабY(-1); преобразование: масштабY(-1); фильтр: ФлипВ; -ms-фильтр: «FlipV»; }