Trucs et Astuces CSS
Chapitre 4 : Galeries

Retour Accueil CSS

30 Cube pivotant

Termes CSS clés employés : transform:translate(), transform:rotate()
Compatibilité navigateurs : IE10+, Firefox16+.
Chrome et Safari avec le préfixe -webkit-.

Problématique

Afficher un cube dont chaque face comporte des informations. Le cube doit pivoter sur lui-même pour afficher successivement toutes les faces.

Résolution théorique

Cela peut être obtenu à l’aide d’un élément conteneur div. Celui-ci contient les images des six faces (elles-mêmes placées dans un élément div). Chaque face subit une rotation à l’aide de la fonction transform:translate pour être mise en/ place correctement, le conteneur se voyant appliquer transform-style:preserve3D afin de pouvoir être manipulé en bloc.
Pour afficher les différentes faces, on applique une rotation au conteneur.

Résolution pratique

La structure HTML est un élément conteneur div, renfermant le cube complet sous forme d’élément div, contenant lui-même six éléments img placés dans des éléments div :
<div class="conteneur"> <div id="cube" class="rotation"> <div id="avant"><img src=adresseimage1 width="200px"></div> <div id="fond"><img src=adresseimage2 width="200px"></div> <div id="droit"><img src=adresseimage3 width="200px"></div> <div id="gauche"><img src=adresseimage4 width="200px"></div> <div id="haut"><img src=adresseimage5 width="200px"></div> <div id="bas"<>img src=adresseimage6 width="200px"></div> </div> </div>
Remarquez l’emploi d’identifiants et de classes pour bien identifier les différents composants. Il est ici employé des images, mais cela pourrait tout aussi bien être un contenu textuel ou mixte. Veillez toutefois à employer un contenu « carré » et de taille uniforme : les faces mesurent ici 200 px de côté.
Le code CSS nécessaire est le suivant :
.conteneur{ perspective:600px;}
L’élément conteneur se voit appliquer une profondeur de fuite, ici de 600 pixels.
#cube{ width: 200px; height: 200px; margin: 60px auto 40px; /*pour centrer le cube sur la page*/ transform-style: preserve-3d; transition: transform 2s; transform: translateZ(-100px) rotateX( -220deg ) rotateY( 45deg ); }
La position de l’élément cube est définie, l’important étant surtout la déclaration transform-style: preserve-3d qui en fait un bloc manipulable aisément : les enfants de cet élément seront représentés dans son contexte 3D. Il est préciser des transformations douces grâce à transition. La première transformation définit la présentation initiale du cube.
#cube div{ position:absolute; backface-visibility: hidden; overflow:hidden; width:200px; height:200px; }
Il est définit ici les caractéristiques globales des éléments des faces, dont essentiellement la taille. Après quoi les caractéristiques individuelles de chaque face sont définies :
#avant{transform: translateZ( 100px );} #fond{transform: translateZ( -100px );} #gauche{transform: rotateY( 90deg ) translateZ( 100px );} #droit{transform: rotateY( -90deg ) translateZ( 100px );} #haut{transform: rotateX(90deg) translateZ( 100px );} #bas{transform: rotateX(-90deg) translateZ( 100px );}
Initialement, le cube est vu de face : toutes les autres faces font avec l’avant un angle de 90°, sauf le fond. On retient un décalage sur l’axe Z de la moitié de la taille de l’image.
L’étape suivante (et finale) consiste à créer un effet d’animation. Celui-ci est répété à l’infini, avec une accélération initiale puis un ralentissement en fin de cycle.
#cube.rotation {animation: tourneCube 8s infinite ease-in-out;}
Voici le code de l’animation elle-même :
/*animation css*/ @keyframes tourneCube { 0% { transform: translateZ(-100px) rotateX(0deg) rotateY(0deg);} 100% {transform: translateZ(-100px) rotateX(360deg) rotateY(360deg);} }

Il pourrait être envisagé une rotation « à la demande » du cube : cela exigerait alors de recourir à un script, comme nous allons le faire dans un autre exemple.


Retour Accueil CSS

© 1999-2014 Fabrice "Fyndhorn Elder" Lemainque