Ce code fait intervenir du html et du CSS intégré.
Je rappelle que pour intégrer le CSS, il convient de le placer entre des balises <style></style>.
Dans cet exemple, je n'ai gardé qu'une seule image.
J'ai marqué le"border:solid 1px white;" en blanc pour qu'il n'apparaisse pas et j'ai ralenti à 16 secondes la vitesse à laquelle l'image répond au zoom.
CODE
<div id="conteneur"><style>#conteneur{
width:position:relative;
width:400px;
height:300px;
border:solid 1px white;
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:16s linear;
-webkit-transition-origin:0% 40%;
-webkit-transform-style: preserve-3d;
-moz-transition:16s linear;
-moz-transition-origin:0% 40%;
-moz-transform-style: preserve-3d;
-o-transition:16s 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><img src="http://img.over-blog-kiwi.com/1/30/51/51/20150327/ob_5a3735_machoire-requin2.jpg"></div>
RESULTAT
Haut de page
commentaires