Guillaume Duverger - Développement & Graphisme - Blog

Vous êtes ici : Accueil > Démonstrations > CSS > Autres

Rotation 3D en CSS3, effet flip card

Passez votre souris sur les photos ci-dessous :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at semper nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at semper nibh.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at semper nibh.

Code :

HTML


<div id="contenu">
<div class="derriere">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at semper nibh.</p>
</div>
<div class="devant">
<img src="https://unsplash.imgix.net/photo-1417722009592-65fa261f5632?q=75&fm=jpg&s=553e7d8a753f4d7b2a4161dcbe9d9801" alt>
</div>
</div>
<div id="contenu1">
<div class="derriere">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at semper nibh.</p>
</div>
<div class="devant">
<img src="https://unsplash.imgix.net/photo-1417722009592-65fa261f5632?q=75&fm=jpg&s=553e7d8a753f4d7b2a4161dcbe9d9801" alt>
</div>
</div>
<div id="contenu2">
<div class="derriere">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at semper nibh.</p>
</div>
<div class="devant">
<img src="https://unsplash.imgix.net/photo-1417722009592-65fa261f5632?q=75&fm=jpg&s=553e7d8a753f4d7b2a4161dcbe9d9801" alt>
</div>
</div>

CSS


*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}

/***rotation 3D flip***/

     
/*pour tous les id*/
#contenu,#contenu1,#contenu2{
color:hsla(0,0%,100%,.8);
position:relative;
margin:2rem auto;
-webkit-perspective:600px;
perspective:600px}

#contenu div,
#contenu1 div,
#contenu2 div{
position:absolute;
left:0;
top:0;
box-shadow:0 8px 5px hsla(0,0%,0%,.2);
transition:.8s}

#contenu .derriere,
#contenu1 .derriere,
#contenu2 .derriere {
outline:1px solid transparent;
background:#7A5FFF;   
overflow:hidden;
backface-visibility:hidden;
transform-style:preserve-3d;
transform:rotatey(-180deg);
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
-webkit-transform:rotatey(-180deg)}

#contenu div.devant,
#contenu1 div.devant,
#contenu2 div.devant{
outline:1px solid transparent;
overflow:hidden;
transform-style: preserve-3d;
backface-visibility:hidden;
-webkit-transform-style:preserve-3d;
-webkit-backface-visibility:hidden;
background:#7A5FFF}

#contenu:hover .derriere,
#contenu1:hover .derriere,
#contenu2:hover .derriere{
transform:rotatey(0);
-webkit-transform:rotatey(0)}

#contenu:hover div.devant,
#contenu1:hover div.devant,
#contenu2:hover div.devant{
-webkit-transform:rotatey(180deg);
transform:rotatey(180deg)}

.derriere p{
color:hsla(0,0%,100%,.4);
word-wrap:break-word;
text-align:left;
font-size:1.25rem}

/*premier*/
#contenu{height:320px;width:200px}
#contenu div{width:100%;height:280px;padding:20px}

/*deuxieme*/
#contenu1{height:360px;width:240px}
#contenu1 div{width:100%;height:320px;padding:20px}

/*troisieme*/
#contenu2{height:320px;width:200px}
#contenu2 div{width:100%;height:280px;padding:20px}
     


Support navigateurs :

CSS transforms 3d

Vous rencontrez un problème avec cette démonstration ?

Avant de vous arracher les cheveux ou de crier au scandale, procédez à quelques simples vérifications. Si la démonstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de même chez vous. De plus vous pouvez télécharger la démonstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne réponds qu'aux messages respectueux.