Lien d’origine: https://codepen.io/eriksenlezama/pen/ddyYXv
HTML:
<section class="perspectiveMouseHover"> <div class="container"> <div class="image"> <img src="http://pixelcurse.com/wp-content/uploads/2011/02/minimalist_landscape_8.jpg" class="img" alt=""> </div> </div> </section>
CSS:
.perspectiveMouseHover {
padding: 0;
margin: 0;
}
.perspectiveMouseHover .container {
width: 100%;
min-height: 100vh;
background: #333;
}
.perspectiveMouseHover .image {
perspective: 3000px;
width: 50%;
position: absolute;
left: 50%;
top:50%;
transform: translate(-50%, -50%);
transform-style: preserve-3d;
}
.perspectiveMouseHover .image img {
transform: rotateX(70deg) rotateZ(-60deg) translate3d(-120px, 0px, 70px);
box-shadow: -80px 60px 15px 5px rgba(0,0,0,0.4);
transition: all .4s;
transform-style: preserve-3d;
}
.perspectiveMouseHover .image:hover img {
transform: rotateX(0deg) rotateZ(0deg) translate3d(0px, 0px, 0px);
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}