Анимация поворачивающейся карты

Пример кода на JSFiddle

HTML-код:

<div class="card">
    <div class="card-front"><!-- контент спереди --></div>
    <div class="card-back"><!-- контент сзади --></div>
</div>

Область внутри объекта .card надо сделать трёхмерным (т.е. чтобы можно было размещать и трансформировать HTML-объекты в трёхмерном пространстве). Это делается через свойство perspective.

.card {
    width: 200px;
    height: 266px;
    position: relative;

    /* задать область как 3D-пространство */
    perspective: 800px;
}

Теперь надо сделать переднюю и заднюю часть объекта друг напротив друга, и сделать, чтобы передняя часть объекта перекрывала заднюю часть. Заднюю часть объекта при этом надо сделать прозрачной и повернуть на 180 градусов.

.card-front,
.card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    
    /* анимация при переворачивании объекта */
    transition: 0.8s;

    /* скрывать заднюю часть объекта */
    backface-visibility: hidden;
}

.card-front {
    z-index: 100
}

.card-back {
    opacity: 0;
    z-index: 1;
    
    /* Повернуть элемент */
    transform: rotateY(180deg);
}

Когда поворачивают объект на 180 градусов, его задняя часть всё равно отображается (в зеркальном виде). Чтобы задняя часть не отображалась, используют свойство backface-visibility.

Осталось добавить событие наведения мыши, при котором будет поворачиваться объект.

.card:hover .card-front {
    opacity: 0;
    transform: rotateY(-180deg);
}

.card:hover .card-back {
    opacity: 1;
    transform: rotateY(0deg);
}

Посмотреть демонстрацию кода можно по ссылке в начале страницы.