Как перевернуть изображение в блоке?

Question

[MrxAlexo]

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

<div class="background">
        <div class="container">
            <div class="block"></div>
        </div>
    </div>

.container {
    width: 100%;
    height: 100%;
}

.block {
    margin-left: 10%;
    height: 100%;
    width: 10%;
    border: 3px solid #fff;
}

Answer 1

[ThunderCat]

А че, сам блок перевернуть не судьба? transform: rotate(180deg); вроде должно помочь

Comments

[MrxAlexo]

Переворачивается блок, но не изображение в нем. Вот пример https://codepen.io/mrxalexo/pen/dymaGqd

[Одиночка Айс]

MrxAlexo, лол...

[Wispik]

MrxAlexo, и где в этом примере transform rotate прописан?

[MrxAlexo]

Wispik, а что мешает добавить эту строчку и посмотреть? Я полный код скинул, чтобы было понятие что к чему

[Wispik]

MrxAlexo, ааа, то есть это не ты должен показать, как пробовал и что не работает, а нам самим это надо делать)))
Кстати я то строчку добавил и у меня фон повернулся, магия...

[ThunderCat]

MrxAlexo, так я не понял, зачем ты скинул полный код, чтобы мы вместо тебя эту строчку добавили?

[alexalexes]

Еще вариант использовать:
transform: scale(-/+1, -/+1);
В зависимости от знаков аргументов можно переворачивать и отражать изображение как угодно.

MrxAlexo, не охота даже включать тестовую среду, чтобы покрутить, повертеть одно/два CSS свойства с очевидными эффектами применения.

[Вадим]

MrxAlexo, Так у Вас для этого блока не задано фоновое изображение же..

[MrxAlexo]

Wispik, не знаю куда ты добавлял строчку, но пример я поправил. И в примере это не работает.

[Wispik]

MrxAlexo, а, ты только в блоке хочешь отзеркалить картинку. Очевидно, что это невозможно, потому что у блока нет фона

[MrxAlexo]

Вадим, а фильтров, которые могли бы зеркалить, не существует?(

[ThunderCat]

MrxAlexo,

И в примере это не работает.

Возможно это не очевидно, но нужно поворачивать тот блок, который собственно отвечает за картинку. Иначе "никакого чуда не произойдет" (с).

[Вадим]

MrxAlexo, Эх, молодёжь) Раньше говорили дизайнерам чтоб они нафиг шли со своими эффектами наложения в фотошопе, потому что на фронте нет фильтров и режимов смешивания. А тут уже и зеркалить хотят)

[Вадим]

MrxAlexo, А что мешает сделать это без фильтров?

[MrxAlexo]

Вадим, ну картинка находится в другом элементе, первое что пришло в голову, это наложить какой-нибудь "зеркальный" фильтр, если такой существует. Есть еще какие то решения?

[Wispik]

MrxAlexo, вырезать нужную картинку и вставить её в блок фоном

[Вадим]

MrxAlexo, Наследуйте картинку(inherit) и переворачивайте блок.
Только он должен либо быть прямым потомком, либо цепочка наследования.
Ну либо путь до картинки в css переменную и проставлять фон и там и там. Ресурс то всё равно один и тот же. Так что "лишней" работы не будет.

[ThunderCat]

MrxAlexo, вообще не очень понятно, че не перевернуть сам элемент с картинкой то? Нафига эти танцы с бубном вокруг костра из книжки по цсс?

[MrxAlexo]

ThunderCat, потому что нужно, чтобы было перевернуто изображение только в блоке, а сам бекграуд оставался в том же положении.

[ThunderCat]

MrxAlexo, то есть вам нужен выборочный поворот? Точнее описывайте задачу и цель изменений, будет проще подсказать варианты решения.

В данном случае просто трансформацией скорее всего не получится. Нужен скрипт, или, если блок будет статичен - верное позиционирование бэкграунда во внутреннем блоке, с совмещением их по положению.

https://codepen.io/ThunderCat-aka-Snark/pen/QWmYEYV

[ForSureN1]

MrxAlexo, https://codepen.io/forsuren1/pen/OJvdXpp magic...

[MrxAlexo]

Выполнил немного по-другому, но всем спасибо за ответы.