Pas d'abonnement ni de commentaire

FAITES-VOUS PEUR AVEC UNE IMAGE AU PASSAGE DE LA SOURIS.

par André Marini 28 Mars 2015, 11:04 Images

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