Flip-карточка на чистом CSS Давайте сегодня разберём, как создать интерактивную flip-карточку, с переворотом по клику без JS. HTML: <label class="flip-card"> <input type="checkbox" class="flip-checkbox"> <div class="flip-inner"> <div class="card front"> Hello </div> <div class="card back"> Привет </div> </div> </label> Оборачиваем всё в label, чтобы при клике в любое место карточки checkbox менял своё состояние. Сам checkbox скрываем: .flip-checkbox { display: none; } 3D-контекст: .flip-card { perspective: 1000px; } perspective создаёт глубину для 3D-преобразований. Основной механизм flip: .flip-inner { transform-style: preserve-3d; transition: transform 0.6s; } .flip-checkbox:checked + .flip-inner { transform: rotateY(180deg); } При клике на checkbox (через label) контейнер поворачивается на 180 градусов по оси Y. Две стороны одной карточки: .card { position: absolute; backface-visibility: hidden; } .card.back { transform: rotateY(180deg); } Обе стороны абсолютно позиционированы. backface-visibility: hidden скрывает обратную сторону элемента. Задняя сторона изначально развёрнута на 180 градусов. Идеально подходит для карточек с вопросами/ответами, изучения языков или просто интерактивных элементов) Результат можно глянуть здесь.