Comment - 3D Flip Box
Apprenez à créer une flip box avec CSS.
Boîte à rabat
Déplacez votre souris sur les cases ci-dessous pour voir l'effet :
Basculement horizontal :
Face avant
Verso
Retournement vertical :
Face avant
Verso
Comment créer une boîte à rabat
Étape 1) Ajoutez du HTML :
Exemple
<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>
Étape 2) Ajoutez CSS :
Exemple
/* 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);
}
Retournement vertical
Pour faire un retournement vertical au lieu d'un retournement horizontal, utilisez la rotateX
méthode au lieu de rotateY
:
Exemple
.flip-box:hover .flip-box-inner {
transform: rotateX(180deg);
}
.flip-box-back {
transform: rotateX(180deg);
}
Remarque : Ces exemples ne fonctionnent pas correctement sur les tablettes et/ou les téléphones portables.
Conseil : accédez à notre didacticiel sur les transformations CSS 2D pour en savoir plus sur les transformations 2D, telles que la méthode rotate().
Conseil : accédez à notre didacticiel CSS 3D Transforms pour en savoir plus sur les transformations 3D.