ICI header("Location: http://www.mytesting.fr ");

COMMENT ZOOMER DES IMAGES EN CODE HTML ET CSS ASSOCIES.

par André Marini 25 Mars 2015, 10:00 Images

CET ARTICLE EST TRES LONG.

IL CONVIENT DE LE SUIVRE PAS A PAS.

 

Lorsque vous arriverez au résultat, vous comprendrez tout le parti que l'on peut tirer de ce code qui permet beaucoup de fantaisie au niveau des images.

 

Rappel important :

 

Lorsqu'on intègre du CSS au html, il faut toujours le placer entre des balises <style></style>

CODE HTML DE BASE

 

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

Définissons la notion de perspective en CSS du conteneur principal. 

Ce code sera placé derrière la fermeture de la div "conteneur"

 

<style>#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; 
}</style>

Déclarons en CSS l'animation qui sera appliquée. 

Ce code sera placé après la fermeture de la div "parent"

 

<style>#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); 
}</style>

finissons sur l'axe Z la profondeur des div de chaque diapositive.

Ici, j'ai assemblé le html et le CSS.

 

DIV 1

 

<div class="diapositive div1"><style>.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); 
}</style>
<span style="color:#000000;">
1</span></div> 

DIV 2

 

<div class="diapositive div2"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div2{ 
   -webkit-transform:translateZ(-200px); 
   -moz-transform:translateZ(-200px); 
   -o-transform:translateZ(-200px); 
}</style>
<span style="color:#B22222;">2</span></div> 

Vous remarquez au passage que la translation diminue de 200 à chaque diapositive de façon à ce qu'elle se présente successivement.

DIV 3

 

<div class="diapositive div3"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div3{ 
   -webkit-transform:translateZ(-400px); 
   -moz-transform:translateZ(-400px); 
   -o-transform:translateZ(-400px); 
}</style>
<span style="color:#FF0000;">3</span></div> 

DIV 4

 

<div class="diapositive div4"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div4{ 
   -webkit-transform:translateZ(-600px); 
   -moz-transform:translateZ(-600px); 
   -o-transform:translateZ(-600px); 
}</style>
<span style="color:#008000;">​4</span></div> 

DIV 5

 

<div class="diapositive div5"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div5{ 
   -webkit-transform:translateZ(-800px); 
   -moz-transform:translateZ(-800px); 
   -o-transform:translateZ(-800px); 
}</style>
<span style="color:#FFA500;">5</span></div> 

DIV 6

 

<div class="diapositive div6"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div6{ 
   -webkit-transform:translateZ(-1000px); 
   -moz-transform:translateZ(-1000px); 
   -o-transform:translateZ(-1000px); 
}</style>
<span style="color:#800080;">6</span></div> 

DIV 7

 

<div class="diapositive div7"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div7{ 
   -webkit-transform:translateZ(-1200px); 
   -moz-transform:translateZ(-1200px); 
   -o-transform:translateZ(-1200px); 
}</style>
<span style="color:#000000;">7</span></div> 

DIV 8

 

<div class="diapositive div8"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div8{ 
   -webkit-transform:translateZ(-1400px); 
   -moz-transform:translateZ(-1400px); 
   -o-transform:translateZ(-1400px); 
}</style>
<span style="color:#000080;">8</span></div> 

DIV 9

 

<div class="diapositive div9"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div9{ 
   -webkit-transform:translateZ(-1600px); 
   -moz-transform:translateZ(-1600px); 
   -o-transform:translateZ(-1600px); 
}</style>
<span style="color:#FF0000;">9</style></div> 

DIV 10

 

<div class="diapositive div10"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div10{ 
   -webkit-transform:translateZ(-1800px); 
   -moz-transform:translateZ(-1800px); 
   -o-transform:translateZ(-1800px); 
}</style>
<span style="color:#808080;">10</span></div> 

MAINTENANT, J'ASSEMBLE TOUT CELA, HTML ET CSS.  

 

html "conteneur" global suivi du CSS conteneur.

 

html "parent" suivi du CSS parent.

 

puis html et CSS de chaque diapositive.

 

Puis couleur différente sur chaque chiffre.

 

CODE

 

<div id="conteneur"><style>#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; 
}</style>
 
   <div id="parent">
<style>#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); 
}</style>

<div class="diapositive div1"><style>.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); 
}</style>
<span style="color:#000000;">
1</span></div>

<div class="diapositive div2"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div2{ 
   -webkit-transform:translateZ(-200px); 
   -moz-transform:translateZ(-200px); 
   -o-transform:translateZ(-200px); 
}</style>
<span style="color:#B22222;">2</span></div>  

<div class="diapositive div3"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div3{ 
   -webkit-transform:translateZ(-400px); 
   -moz-transform:translateZ(-400px); 
   -o-transform:translateZ(-400px); 
}</style>
<span style="color:#FF0000;">3</span></div> 

<div class="diapositive div4"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div4{ 
   -webkit-transform:translateZ(-600px); 
   -moz-transform:translateZ(-600px); 
   -o-transform:translateZ(-600px); 
}</style>
<span style="color:#008000;">​4</span></div>

<div class="diapositive div5"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div5{ 
   -webkit-transform:translateZ(-800px); 
   -moz-transform:translateZ(-800px); 
   -o-transform:translateZ(-800px); 
}</style>
<span style="color:#FFA500;">5</span></div>

<div class="diapositive div6"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div6{ 
   -webkit-transform:translateZ(-1000px); 
   -moz-transform:translateZ(-1000px); 
   -o-transform:translateZ(-1000px); 
}</style>
<span style="color:#800080;">6</span></div>

<div class="diapositive div7"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div7{ 
   -webkit-transform:translateZ(-1200px); 
   -moz-transform:translateZ(-1200px); 
   -o-transform:translateZ(-1200px); 
}</style>
<span style="color:#000000;">7</span></div>

<div class="diapositive div8"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div8{ 
   -webkit-transform:translateZ(-1400px); 
   -moz-transform:translateZ(-1400px); 
   -o-transform:translateZ(-1400px); 
}</style>
<span style="color:#000080;">8</span></div>

<div class="diapositive div9"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div9{ 
   -webkit-transform:translateZ(-1600px); 
   -moz-transform:translateZ(-1600px); 
   -o-transform:translateZ(-1600px); 
}</style>
<span style="color:#FF0000;">9</style></div>

<div class="diapositive div10"><style>.diapositive{ 
   position:absolute; 
   width:400px; 
   height:300px; 
   margin:0px auto; 
   line-height:300px; 
   font-size:100px; 
   text-align:center; 

.div10{ 
   -webkit-transform:translateZ(-1800px); 
   -moz-transform:translateZ(-1800px); 
   -o-transform:translateZ(-1800px); 
}</style>
<span style="color:#808080;">10</span></div>      

   </div> 

</div>

 

RESULTAT en plaçant votre souris dans le cadre.

1
2
3
​4
5
6
7
8
9
10

commentaires

Haut de page