Termes CSS clés employés : transform:translate(), transform:rotate()
Compatibilité navigateurs : IE10+, Firefox16+.
Chrome et Safari avec le préfixe -webkit-.
Afficher un cube dont chaque face comporte des informations. Le cube doit pivoter sur lui-même pour afficher successivement toutes les faces.
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.
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.
|
---|