Animations 3D en CSS

Cliquez sur une des cartes et observez
L'animation 3D de la carte cesse dès que vous relachez le bouton gauche de la souris.

Notez que les cartes sont parfaitement centrées dans leur boîte parente.

Dans cette page j'introduis l'animation 3D. Mais j'en profite aussi pour faire une "piqure de rappel" sur le positionnement avec l'outil "flexbox" (c'est tellement simple).

Le code CSS correspondant

#container {width : 100% ; height :400px ; perspective : 800px ; perspective-origin : top right ; border :1px solid black; display : flex; flex-direction : row; justify-content : center ; align-items : center;} #container img {margin : 1% ; width : 25%; } @keyframes transformer3D { 0% {transform : rotateY(90deg) translateZ(200px);} 33% {transform : rotateY(-90deg) translateZ(-200px);} 66% {transform : rotateX(90deg) translateZ(200px);} 100% {transform : rotateX(-90deg) translateZ(-200px); } } #img {margin : 10px ; height:250px; } #container img:active{animation : transformer3D 10s 0s infinite linear alternate ;}

Notez que la largeur du container est exprimé en % (responsive web design).

Les éléments enfants de la boîte identifiée container seront centrées dans la boîte parente grâce aux propriétés de l'outil "flexbox" !
Dans cette boîte "container" je définis aussi l'axe Z avec les propriétés perspective et perspective-origin.

Je définis une modèle d'animation identifié transformer3D.
J'applique cette animation à n'importe quelle image sur clic.

Le code HTML

<div id ="container"> <img src="../images/as_coeur.jpg" /> <img src="../images/as_pique.jpg" /> </div>

On ne peut plus simple ...
Retour menu