Gewusst wie: 3D-Flip-Box
Erfahren Sie, wie Sie mit CSS eine Flipbox erstellen.
Flip-Box
Bewegen Sie Ihre Maus über die Kästchen unten, um den Effekt zu sehen:
Horizontale Spiegelung:
Vorderseite
Rückseite
Vertikaler Flip:
Vorderseite
Rückseite
So erstellen Sie eine Flipbox
Schritt 1) HTML hinzufügen:
Beispiel
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<h2>Front
Side</h2>
</div>
<div
class="flip-box-back">
<h2>Back Side</h2>
</div>
</div>
</div>
Schritt 2) CSS hinzufügen:
Beispiel
/* The flip box container - set the width and height to whatever you want. We
have added the border property to demonstrate that the flip itself goes out of
the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective:
1000px; /* Remove this if you don't want the 3D effect */
}
/* This
container is needed to position the front and back side */
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform
0.8s;
transform-style: preserve-3d;
}
/* Do an horizontal
flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
/* Style the front side */
.flip-box-front {
background-color: #bbb;
color: black;
}
/* Style the back side */
.flip-box-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
Vertikaler Flip
Um ein vertikales Spiegeln anstelle eines horizontalen durchzuführen, verwenden Sie die rotateX
Methode anstelle von rotateY
:
Beispiel
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
Hinweis: Diese Beispiele funktionieren auf Tablets und/oder Mobiltelefonen nicht richtig.
Tipp: Gehen Sie zu unserem CSS-2D-Transformations -Tutorial, um mehr über 2D-Transformationen zu erfahren, wie z. B. die rotation()-Methode.
Tipp: Gehen Sie zu unserem CSS-3D-Transformations- Tutorial, um mehr über 3D-Transformationen zu erfahren.