3D vertikale Flip -Animation auf einem Div mit einer anderen Rückseite? ⇐ HTML

[Anonymous]

Ich versuche im Grunde genommen, einen Effekt von einer Website (Awwward-Link) zu replizieren, in der es ein Raster von Divs gibt, die individuell vertikal in der Lage sind, und alle zusammen auf dem Scroll "< /p>
Es scheint auch eine subtile Wirkung zu haben, sobald die Karte ähnlich wie eine Framer-Frühlingsfrührung aussieht. Swup, aber ich bin mir nicht sicher, ob es tatsächlich drei Js für diesen bestimmten Abschnitt verwendet. 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>
ist jedoch nicht die Tatsache, dass die Divs auf der Website einen anderen, kontinuierlichen Inhalt auf der Rückseite enthalten, oder wechselt es tatsächlich nur in eine separate Div? Wie kann ich diesen Effekt replizieren?