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

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

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

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";
}
29
css css-filters html transform

4 ответов

попробуйте это:

.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 дважды он будет переопределять первый.

41

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

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/

6

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

6

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

.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 будет принимать несколько фильтров.

3