Как повернуть div на 180 градусов?

Question

[Insanus]

Есть карточки, каждая заполнена с двух сторон. Как заставить повернуться карточку после клика по ней (поворот при наведении не подходит, поскольку там будет дополнение, что при наведении на карточку показываются соцсети)?
Вот ссылка на код:
https://codepen.io/Insanus/pen/zYGaraO

Comments

[ThunderCat]

в этом посте все прекрасно )

[Insanus]

roixxv, ThunderCat, сори хабр сылку не пропустил

Answer 1

[Евгений Винокуров]

Поворачивать в CSS - transform: rotate(180deg);

Отслеживать событие через JS -

const target = document.querySelector('.target') // забираешь див через его класс (target) в HTML

target.addEventListener('click', () => { // отслеживаешь событие клика на диве (target)
 target.classList.add('styles') // и применяешь стили (styles) к таргету
})

Comments

[Insanus]

я попытался но у меня не получилось
у меня получился нужный результат при
таком js

turn.onclick = function(){
  this.classList.toggle('turning')
}

и такм css

.turning .front {transform: rotateY(180deg);}
.turning .back {transform: rotateY(360deg);}

<div class="command" id="turn">
...
</div>

но оно работает только если одна карточка
(и сори что изначально сылки не было, я вставил но хабр её не принел по какойто причине мне потом исправили и она появилась )

[Евгений Винокуров]

Insanus, надеюсь это то, чего ты пытаешься добиться. Пришлось повозиться и вспомнить про perspective в CSS) тык

[Insanus]

Большое спасибо Евгений Винокуров,