Accueil    Codes    CSS3 zoom en profondeur
 



CSS3 zoom en profondeur  CSS3 zoom en profondeur


  • 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 donnant un effet de zoom en profondeur suite à une transformation le long de l'axe Z vers des divisions positionnées à différents niveaux de profondeur.


1
2
3
4
5
6
7
8
9
10


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 en profondeur et enfin les différentes <div> positionnées spécifiquement sur l'axe Z et affichant les numéros 1 à 10.

Le code html est le suivant :

<div id="conteneur">
   <div id="parent">
      <div class="diapositive div1">1</div>
      <div class="diapositive div2">2</div>
      <div class="diapositive div3">3</div>
      <div class="diapositive div4">4</div>
      <div class="diapositive div5">5</div>
      <div class="diapositive div6">6</div>
      <div class="diapositive div7">7</div>
      <div class="diapositive div8">8</div>
      <div class="diapositive div9">9</div>
      <div class="diapositive div10">10</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:400px;
   height:300px;
   border:solid 1px black;
   margin:0px auto;
   -webkit-perspective:500px;
   -webkit-perspective-origin:50% 50%;
   -moz-perspective:500px;
   -moz-perspective-origin:50% 50%;
   -o-perspective:500px;
   -o-perspective-origin:50% 50%;
   overflow:hidden;
}

Une fois la perspective déterminée, on peut définir la profondeur des div sur l'axe Z

.diapositive{
   position:absolute;
   width:400px;
   height:300px;
   margin:0px auto;
   line-height:300px;
   font-size:100px;
   text-align:center;
}
.div1{
   -webkit-transform:translateZ(0px);
   -moz-transform:translateZ(0px);
   -o-transform:translateZ(0px);
}
.div2{
   -webkit-transform:translateZ(-200px);
   -moz-transform:translateZ(-200px);
   -o-transform:translateZ(-200px);
}
.div3{
   -webkit-transform:translateZ(-400px);
   -moz-transform:translateZ(-400px);
   -o-transform:translateZ(-400px);
}
...

Finalement, on déclare pour l'élément <div> parent l'animation qui sera appliquée : une translation continue sur l'axe Z. On applique également le style CSS transform-style:preserve:3d pour préserver les éléments enfants dans un espace en 3 dimensions.


#parent{
   -webkit-transition:6s linear;
   -webkit-transition-origin:0% 40%;
   -webkit-transform-style: preserve-3d;
   -moz-transition:6s linear;
   -moz-transition-origin:0% 40%;
   -moz-transform-style: preserve-3d;
   -o-transition:6s linear;
   -o-transition-origin:0% 40%;
   -o-transform-style: preserve-3d;
}
#parent:hover{
   -webkit-transform:TranslateZ(2160px);
   -moz-transform:TranslateZ(2160px);
   -o-transform:TranslateZ(2160px);
}