A simple and stylish CSS technique to skew images using the transform property, adding a dynamic and modern look to your web design
HTML Code
<div class="image-holder">
<img src="https://i.pinimg.com/736x/fa/29/70/fa2970d17e2bbc7603b171ec231b6a4e.jpg" class="img" />
</div>
CSS Code
.image-holder{
transform: perspective(1000px) rotateX(8deg) rotateY(-38deg) rotate(6deg);
border-radius: 5px;
}
.image-holder img{
position: absolute;
box-shadow: 0 50px 100px -20px rgba(50,50,93,.3),0 30px 60px -30px rgba(0,0,0,.5),-10px 10px 60px -10px rgba(103,178,111,.3);
left: 0;
}
