ICI header("Location: http://www.mytesting.fr ");
TESTS ET ASTUCES DE BLOGUEUR

EFFECTUER UN MOUVEMENT DE ROTATION D'UNE IMAGE DANS UN CADRE.

par André MARINI 25 Novembre 2015, 08:47 Images

En html, on pose d'abord le conteneur, puis le parent, puis l'image.

 

<div class="conteneur"> 
   <div class="parent"> 
      <div class="aspect-div div1"></div>       
   </div> 
</div>

 

Puis en CSS, on définit chacun des div  "conteneur", "parent", "image" en n'oubliant pas que le CSS doit toujours être compris entre les balises <style></style> 

 

En bleu, le html

En marron le CSS

En noir, l'url de l'image

 

On voit d'ailleurs qu'il y a deux images identiques, présentées  sous des formes différentes. 

 

L'angle de rotation, écrit en rouge dans le CSS, est de 180 degrés.

 

CODE

<div class="conteneur">
<style type="text/css">.conteneur{ 
   border:solid 4px silver; 
   border-radius:35px; 
   width:500px; 
   height:375px; 
   margin:0px auto; 
   overflow:hidden; 
   position:relative; 
   background-color:#EDEDED; 
}
</style>
<div class="parent">
<style type="text/css">.parent{ 
   width:500px; 
   height:375px; 
   -webkit-perspective : 2500px; 
   -moz-perspective : 2500px; 
   -o-perspective : 2500px; 
   -ms-perspective : 2500px; 
   perspective : 2500px; 
}
</style>
<div class="aspect-div div1">
<style type="text/css">.div1{ 
   background-image:url(http://data.over-blog-kiwi.com/1/30/51/51/20151125/ob_3f1265_br.jpg); 
   -webkit-transform: translateX(0px) scale(0.7, 0.7) rotateY(180deg) skewY(-8deg);
   -moz-transform: translateX(0px) scale(0.7, 0.7) rotateY(180deg) skewY(-8deg); 
   -o-transform: translateX(0px) scale(0.7, 0.7) rotateY(180deg) skewY(-8deg); 
   -ms-transform: translateX(0px) scale(0.7, 0.7) rotateY(180deg) skewY(-8deg); 
}
</style>
<style type="text/css">.aspect-div{ 
   z-index:1; 
   position:absolute; 
   background-size:500px 375px; 
   border:solid 0px black; 
   display:inline-block; 
   width:500px; 
   height:375px; 
   margin-top:0px; 
   opacity:0.8; 
   cursor:pointer; 
   background-image:url(http://data.over-blog-kiwi.com/1/30/51/51/20151125/ob_3f1265_br.jpg); 
   -webkit-transition: all 800ms linear; 
   -moz-transition: all 800ms linear; 
   -o-transition: all 800ms linear; 
   -ms-transition: all 800ms linear; 
}
</style>
<style type="text/css">.div1:hover{ 
   z-index:10; 
   opacity:1; 
   -webkit-transform: translateX(0px); 
   -moz-transform: translateX(0px); 
   -o-transform: translateX(0px); 
   -ms-transform: translateX(0px); 
}
</style>
</div>

AVEC UN ANGLE DE ROTATION DE 180 DEGRES

Haut de page

Theme: Autofocus © 2013 - Hébergé par Overblog