Отразить/зеркально отобразить изображение по горизонтали + вертикально с помощью 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";
}

Ответы

Ответ 1

Попробуйте следующее:

.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. Поэтому вместо того, чтобы делать оба, он просто сделал последний. Например, если вы дважды выполнили background-color, это заменило бы первый.

Ответ 2

Вы можете сделать transform: rotate(180deg); для горизонтального + вертикального переворота.

Ответ 3

Вы можете применить только одно правило преобразования для любого селектора. Используйте

.img-hor-vert {
    -moz-transform: scaleX(-1) scaleY(-1);
    -o-transform: scaleX(-1) scaleY(-1);
    -webkit-transform: scaleX(-1) scaleY(-1);
    transform: scaleX(-1) scaleY(-1);
    filter: FlipH FlipV;
    -ms-filter: "FlipH FlipV";
}

Я не уверен, что IE будет принимать несколько фильтров.

Ответ 4

Чтобы выполнить отражение, которое вы можете использовать, свойство CSS преобразования вместе с функцией CSS rotate() в этом формате:

transform: rotateX() rotateY();

Функция rotateX() будет вращать элемент вдоль оси x, а функция rotateY() будет вращать элемент вдоль оси y. Я нахожу свой подход интуитивным в том, что можно мысленно визуализировать вращение. В вашем примере решение, использующее мой подход, будет следующим:

.img-hor {
  transform: rotateY(180deg); // Rotate 180 degrees along the y-axis
}

.img-vert {
  transform: rotateX(180deg); // Rotate 180 degrees along the x-axis
}

.img-hor-vert {
  transform: rotateX(180deg) rotateY(180deg); // Rotate 180 degrees on both
}

Сценарий JS для демонстрации решения https://jsfiddle.net/n20196us/1/