Cube 3D-nonfaisablesurMIPS

Cube 3D : Exercice
Attention : Cet exercice utilisant du HTML5 et du CSS3, il ne peut
actuellement être réalisé sur un système de distribution Linux. Les
navigateurs compatibles sur Windows et Mac OS sont Google
Chrome, Opera, Safari et Mozilla Firefox.
Exercice n°1: Animation du Cube
1) Reprenez la base du cube ci­dessous afin de structurer votre code. 1 fichier HTML5 et un
autre CSS3.
2) Sélectionnez une image de votre choix pour représenter les faces de votre cube.
3) Créez une propriété CSS @­webkit­keyframes AnimCube qui anime le Cube. Le
mouvement sera une rotation de 360 degrés sur les axes X et Y.
HTML5 :
<div class="container">
<div id="cube">
<div id="front"><img src="..."/></div>
<div id="back"><img src='...' /></div>
<div id="right"><img src='...' /></div>
<div id="left"><img src='...' /></div>
<div id="up"><img src='...' /></div>
<div id="bottom"><img src='...' /></div>
</div>
</div>
CSS3 :
.container{
position: absolute;
top:20%;
left:35%;
-webkit-perspective:2800px;
-webkit-perspective-origin:50% 50%;
}
#cube{
width: 400px;
height: 400px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateX(-25deg) rotateY(35deg);
}
#cube div{
position:absolute;
width: 200px; /* Taille de chaque face */
height: 200px;
opacity:0.8;
}
#front{ -webkit-transform: translateZ(-100px); }
#back{ -webkit-transform: translateZ(100px); }
#left{ -webkit-transform: rotateY(-90deg) translateZ(100px); }
#right{ -webkit-transform: rotateY(90deg) translateZ(100px); }
#up{ -webkit-transform: rotateX(-90deg) translateZ(100px); }
#bottom{ -webkit-transform: rotateX(90deg) translateZ(100px); }
@­webkit­keyframes AnimCube { /* Animation pour Webkit (Chrome, Safari, Android, ...) */
from { A compléter... } //position de départ
to{ A compléter... } //position finale
}
Exercice n°2: Un cube interactif
L’objectif est d’ouvrir le cube lors du passage de la souris. Concrètement, chaque face sera
“repoussée” vers l’extérieur comme le montre la figure ci­dessous et on pourra observer une
sorte de décomposition du cube en 6 parties
Pour que votre travail soit bien lisible, vous ajouterez la propriété transition: 5s au sélecteur
#cube div
Bon travail !