Les transformations 3D Transformations

Un exemple fonctionnel se trouve dans le fichier 4_15_transformation3D.html.

Pour la partie HTML, nous avons tout d’abord un bouton qui, après un clic, fait tourner une zone sur elle-même par rapport à l’axe Y. Il est suivi par le div qui contient les deux faces et qui a pour ID zoneRota.

<input type="button" onclick="rotation3D();" value="3D" /> 
<div id="zoneRota"> 
    <div class="face">De face</div> 
    <div class="back face">De dos</div> 
</div>

Les deux faces sont en fait deux div. Elles ont toutes les deux la classe face, qui permet de les positionner dans zoneRota et de rendre leur dos invisible.

La seconde face a en plus la classe back, pour le dos, qui sert essentiellement à mettre ce div de dos, en lui faisant effectuer une rotation de 180° sur l’axe Y.

Il y a donc dans zoneRota deux div qui sont dos à dos.

Elles contiennent un texte assez quelconque mais il est possible d’y mettre plus d’éléments, des images...

L’essentiel se faisant dans la partie CSS, examinons d’abord le code JavaScript inclus dans la page HTML :

var face= true; 
 
function rotation3D() { 
    var zone = document.getElementById(’zoneRota’); 
    if (face) { 
        zone.className = "rota"; 
    } else { 
  ...