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