3D вертикальная анимация флип -анимации на Div с другой задней стороной? ⇐ CSS

[Anonymous]

Я в основном пытаюсь воспроизвести эффект с веб-сайта (ссылка AWWARDS), где, кажется, существует сетка DIV, которые индивидуально «переворачивают» вертикально на горе и все вместе на скрутке. Swup, но я не уверен, использует ли он на самом деле три JS для этого конкретного раздела. PrettyPrint-Override ">body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
}

.flip-card {
width: 200px;
height: 120px;
perspective: 1000px;
cursor: pointer;
}

.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
transform: rotateX(180deg);
}

.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
backface-visibility: hidden;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.flip-card-front {
background-color: dodgerblue;
color: white;
}

.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateX(180deg);
}< /code>



Front

Back


< /code>
< /div>
< /div>
< /p>
Но это не охватывает тот факт, что Divs на веб -сайте содержит другое, непрерывное содержание на задней стороне, или на самом деле он просто переходит в отдельный Div? Как я могу воспроизвести этот эффект?

Подробнее здесь: https://stackoverflow.com/questions/794 ... t-backside