3D-Karten-Flip-Effekt
Eine Karte mit einem beeindruckenden 3D-Flip-Effekt beim Hover.
Demo
Vorderseite
Hover über diese Karte
Rückseite
Toller 3D-Effekt!
Code
HTML
CSS
JavaScript
<div class="flip-card-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<h3>Vorderseite</h3>
<p>Hover über diese Karte</p>
</div>
<div class="flip-card-back">
<h3>Rückseite</h3>
<p>Toller 3D-Effekt!</p>
</div>
</div>
</div>
</div>
.flip-card-container {
perspective: 1000px;
width: 250px;
height: 200px;
}
.flip-card {
width: 100%;
height: 100%;
position: relative;
transition: transform 0.6s;
transform-style: preserve-3d;
cursor: pointer;
}
.flip-card-container:hover .flip-card {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.flip-card-front {
background-color: #f8f9fa;
color: #333;
}
.flip-card-back {
background-color: #3498db;
color: #fff;
transform: rotateY(180deg);
}
Erklärung
Diese 3D-Karte verwendet CSS-Transformationen, um einen realistischen Flip-Effekt zu erzeugen.
Die wichtigsten Eigenschaften sind:
perspective: 1000px;
- Gibt dem Container eine 3D-Perspektivetransform-style: preserve-3d;
- Behält den 3D-Raum für verschachtelte Elemente beibackface-visibility: hidden;
- Versteckt die Rückseite der Elemente bei der Rotationtransform: rotateY(180deg);
- Dreht die Karte auf der Y-Achse
Beide Seiten der Karte sind absolut positioniert und übereinander gestapelt, aber die Rückseite beginnt bereits umgedreht.
Verwendung
Verwende diesen Effekt für interaktive Informationskarten, Teammitgliederprofile oder Produktkarten, um mehr Informationen auf begrenztem Raum zu zeigen.