Accueil    Codes    CSS3 cube
 



CSS3 cube  CSS3 cube


  • Compatibilité avec les navigateurs :
  • Google Chrome 20.0 et plus
  • Firefox 14.0.1 et plus
  • IE 9 et plus
  • Opera 12 et plus
  • Safari 5.1.7 et plus



Introduction



Voici une application des styles css3 utilisant la perpective et le positionement sur l'axe Z pour créer un cube composé de 6 éléments <div> :


6
5
4
3
2
Start










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 <div> positionnées spécifiquement dans l'espace pour former le cube.

Le code html est le suivant :

<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.

#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 :


.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 <div> parent l'animation qui sera appliquée :


.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); }
}