logo

3D perspective image hover

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);
}