3D-карточка с переворотом

Это компонент пользовательского интерфейса флип-карты, который имеет эффект вращения в трехмерном пространстве. При наведении курсора карточка переворачивается, чтобы открыть содержимое на обратной стороне.

Предварительный просмотр

Front Side

Hover me to flip

Back Side

This is the back of the card

Код

<div class="flip-card-container">
<div class="flip-card">
  <div class="flip-card-front">
    <div class="card-content">
      <h3>Front Side</h3>
      <p>Hover me to flip</p>
    </div>
  </div>
  <div class="flip-card-back">
    <div class="card-content">
      <h3>Back Side</h3>
      <p>This is the back of the card</p>
    </div>
  </div>
</div>
</div>

.flip-card-container {
/* Установите глубину 3D-пространства */
perspective: 1000px;
width: 300px;
height: 400px;
}

.flip-card {
width: 100%;
height: 100%;
position: relative;
/* Плавная анимация вращения */
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
/* Применяем 3D-преобразование к дочерним элементам */
transform-style: preserve-3d;
cursor: pointer;
}

/* Поворот на 180 градусов вокруг оси Y при наведении */
.flip-card-container:hover .flip-card {
transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
width: 100%;
height: 100%;
position: absolute;
/* Hide element when flipped */
backface-visibility: hidden;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 2rem;
background: white;
color: #333;
}

/* Rotate back element 180 degrees initially */
.flip-card-back {
transform: rotateY(180deg);
background: linear-gradient(135deg, #6366f1, #a855f7);
color: white;
}

.card-content h3 {
margin: 0 0 1rem 0;
font-size: 1.5rem;
}

.card-content p {
margin: 0;
font-size: 1rem;
opacity: 0.9;
}