/* Контейнер для флип-карточек — задайте желаемую ширину и высоту. Мы добавили свойство border, чтобы продемонстрировать, что при наведении курсор выходит за пределы контейнера (удалите свойство perspective, если вам не нужен 3D-эффект */
.flip-card {
цвет фона: прозрачный;
ширина: 300 пикселей;
высота: 200px;
граница: 1px solid #f1f1f1;
перспектива: 1000 пикселей; /* Удалите это, если вам не нужен 3D-эффект */
}

/* Этот контейнер необходим для размещения лицевой и обратной сторон */
.flip-card-inner {
position: relative;
ширина: 100%;
высота: 100%;
выравнивание текста по: центру;
переход: преобразование 0,8 с;
transform-style: preserve-3d;
}

/* Выполняйте горизонтальное переворачивание, наводя курсор мыши на контейнер Flip Box */
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}

/* Расположите лицевую и изнаночную стороны */
.flip-card-front, .flip-card-back {
position: абсолютное;
ширина: 100%;
высота: 100%;
-webkit-backface-visibility: hidden; /* Safari */
обратная поверхность-видимость: скрыта;
}

/* Оформление лицевой стороны (запасной вариант на случай отсутствия изображения) */
.flip-card-front {
цвет фона: #bbb;
цвет: чёрный;
}

/* Придайте форму обратной стороне */
.flip-card-back {
цвет фона: тёмно-синий;
цвет: белый;
transform: rotateY(180deg);
}