Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5847 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120011 Cube animé | | Mise en place La partie html se compose d'un conteneur global sur lequel on définit la perspective, d'un conteneur parent sur lequel est appliqué l'animation de déplacement et enfin les six différentes positionnées spécifiquement dans l'espace pour former le cube. Le code html est le suivant : - Code:
-
<div id="conteneur"> <div class="parent"> <div class="face cote6">6</div> <div class="face cote5">5</div> <div class="face cote4">4</div> <div class="face cote3">3</div> <div class="face cote2">2</div> <div class="face cote1">Start</div> </div> </div>
Au niveau de la partie CSS, le conteneur global est l'endroit adéquat dans lequel définir la notion de perspective pour des transformations 3D. Elle est initialisée avec les styles CSS perspective et perspective-origin. - Code:
-
#conteneur{ width:position:relative; width:300px; height:200px; margin:0px auto; -webkit-perspective:2800px; -webkit-perspective-origin:50% 50%; -moz-perspective:2800px; -moz-perspective-origin:50% 50%; -o-perspective:2800px; -o-perspective-origin:50% 50%; }
Une fois la perspective déterminée, on peut définir le positionnement des div pour former le cube : - Code:
-
.face{ width:300px; height:300px; position:absolute; line-height:300px; text-align:center; font-size:80px; opacity:0.7; border:solid 1px black; }
.cote1{ background-color:silver; z-index:10; } .cote2{ background-image:url(exemples/galerie/fond1.jpg); transform:translateZ(-150px) translateX(150px) rotateY(90deg); -webkit-transform:translateZ(-150px) translateX(150px) rotateY(90deg); -moz-transform:translateZ(-150px) translateX(150px) rotateY(90deg); -o-transform:translateZ(-150px) translateX(150px) rotateY(90deg); -ms-transform:translateZ(-150px) translateX(150px) rotateY(90deg); } .cote3{ background-image:url(exemples/galerie/fond2.jpg); transform:translateZ(-150px) translateX(-150px) rotateY(-90deg); -webkit-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg); -moz-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg); -o-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg); -ms-transform:translateZ(-150px) translateX(-150px) rotateY(-90deg); } .cote4{ background-image:url(exemples/galerie/fond3.jpg); transform:translateZ(-150px) translateY(150px) rotateX(-90deg); -webkit-transform:translateZ(-150px) translateY(150px) rotateX(-90deg); -moz-transform:translateZ(-150px) translateY(150px) rotateX(90deg); -o-transform:translateZ(-150px) translateY(150px) rotateX(-90deg); -ms-transform:translateZ(-150px) translateY(150px) rotateX(-90deg); } .cote5{ background-image:url(exemples/galerie/fond4.jpg); transform:translateZ(-150px) translateY(-150px) rotateX(90deg); -webkit-transform:translateZ(-150px) translateY(-150px) rotateX(90deg); -moz-transform:translateZ(-150px) translateY(-150px) rotateX(90deg); -o-transform:translateZ(-150px) translateY(-150px) rotateX(90deg); -ms-transform:translateZ(-150px) translateY(-150px) rotateX(90deg); } .cote6{ background-image:url(exemples/galerie/fond5.jpg); transform:translateZ(-300px); -webkit-transform:translateZ(-300px); -moz-transform:translateZ(-300px); -o-transform:translateZ(-300px); -ms-transform:translateZ(-300px); }
Finalement, on déclare pour l'élément parent l'animation qui sera appliquée : - Code:
-
.parent{ position:relative; width:300px; height:300px; animation:AnimCube 5s linear infinite; transform-style: preserve-3d; -webkit-animation:AnimCube 5s linear infinite; -webkit-transform-style: preserve-3d; -moz-animation:AnimCube 5s linear infinite; -moz-transform-style: preserve-3d; -o-animation:AnimCube 5s linear infinite; -o-transform-style: preserve-3d; -ms-animation:AnimCube 5s linear infinite; -ms-transform-style: preserve-3d; }
@keyframes AnimCube{ from {} to{ transform-origin: 50% 50%; transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); } } @-webkit-keyframes AnimCube{ from {} to{ -webkit-transform-origin: 50% 50%; -webkit-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); } } @-moz-keyframes AnimCube{ from {} to{ -moz-transform-origin: 50% 50%; -moz-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); } } @-o-keyframes AnimCube{ from {} to{ -o-transform-origin: 50% 50%; -o-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); } } @-ms-keyframes AnimCube{ from {} to{ -ms-transform-origin: 50% 50%; -ms-transform: rotateZ(360deg) rotateY(360deg) rotateX(360deg); } }
|
| |