Hoe - 3D Flip Box
Leer hoe u een flip-box maakt met CSS.
Flip Box
Beweeg uw muis over de onderstaande vakken om het effect te zien:
Horizontaal spiegelen:
Voorkant
Achterkant
Verticale spiegeling:
Voorkant
Achterkant
Hoe maak je een flip-box aan
Stap 1) HTML toevoegen:
Voorbeeld
<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>
Stap 2) CSS toevoegen:
Voorbeeld
/* 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);
}
Verticaal spiegelen
Om een verticale omslag te maken in plaats van een horizontale, gebruik je de rotateX
methode in plaats van rotateY
:
Voorbeeld
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
Let op: Deze voorbeelden werken niet goed op tablets en/of mobiele telefoons.
Tip: Ga naar onze CSS 2D-transformaties Tutorial voor meer informatie over 2D-transformaties, zoals de methode roteren().
Tip: Ga naar onze CSS 3D-transformaties Tutorial voor meer informatie over 3D-transformaties.