Анимация картинки.html css

.item {
    flex: 0 1 calc(100%/3 - 20px*2);
    margin: 20px;
    
}

.item-box {
    width: 100%;
    text-align: center;
}

.item-box img {
    width: 300px;
    height: 300px;
    border: 5px solid rgb(219, 219, 219);
    border-radius: 10px;
    transform: skew(20deg);
    background: #555;
    box-shadow: -100px 100px 3px 0px rgba(0,0,0,0.2);
    transition: all 1s;
}

.item-box img:hover {
    transform: skew(0deg); 
}
.item-box img:after {
    position: absolute;   
    transform: rotateX(60deg);
    transform-origin: bottom;
}

<div class="item">
    <div class="item-box">
        <img src="https://www.imgonline.com.ua/examples/bee-on-daisy.jpg" alt="">
    </div>
</div>