CSS3 3d image hover effect animation

CSS3 3d image hover effect animation

Checkout the video

HTML

<div class="wrapper"> <div class="img-area"> <img src="https://i.postimg.cc/sXFy5JGM/1.jpg"/></div> </div>


CSS


body { text-align: center; background: #262626; } .wrapper { position: relative; display: inline-block; font-size: 0; margin-top: 5%; } .wrapper .img-area{ transition: 0.6s; } .wrapper:hover .img-area{ transform: rotateX(0) rotateZ(0); transition: 0.6s; } .img-area { background-color: #ccc; margin: 0 auto; transform: rotateX(70deg) rotateZ(-70deg); position: relative; display: inline-block; margin: 0 auto; transform-style: preserve-3d; } .img-area:before { width: 100%; height: 38px; display: block; content: ""; position: absolute; bottom: -19px; left: 0; background-color: #ddd; transform: rotateX(90deg) translateY(-19px); } .img-area:after { content: ""; position: absolute; top: 0px; left: -19px; width: 38px; height: 100%; background-color: #828282; transform: rotateY(90deg) translateX(19px); }