Кнопка «показать ответ» в вебе: верстаю переворот карточки

Пора карточки не просто списком, а «перевернуть по кнопке». Боялся фронтенда, оказалось — аккуратный CSS + маленький скрипт на клиенте. Когда ответ показался с плавным флипом — радость как в детстве. Я, «бэкендер», собрал интерактив, и это меньше страшно, чем казалось.

Нейтрально: переворот через класс-переключатель и CSS rotateY. Просто и без библиотек.

// маленькая логика флипа
const card = document.querySelector(".card-flip");
document.getElementById("show").addEventListener("click", () => {
    card.classList.toggle("is-flipped");
});

.card-flip { perspective: 800px; }
.card-flip .inner { transition: transform .4s; transform-style: preserve-3d; }
.card-flip.is-flipped .inner { transform: rotateY(180deg); }

Наполнение карточки перешло в «интерактив», и я поймал кайф от веба. Передёргивать над картой? Нет — показывать себе ответ и честно говорить «знал или нет».