Интересное оформление аватарки на CSS

 
<div class="avatar">
    <img class="avatar-image" src="z01.png" alt="avatar" />
</div>

<div class="avatar">
    <img class="avatar-image" src="z02.jpg" alt="avatar" />
</div>

 
.avatar {
    width: 150px;
    height: 150px;
    border: 8px solid #d33a2c;
    border-radius: 8px;
    transform: scale(.84) translateX(15%) rotateZ(-11deg);
    overflow: hidden;
    transition: transform .2s ease-out;
}

.avatar-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.2) rotateZ(11deg);
    transition: transform .2s ease-out;
}

.avatar:hover {
    transform: scale(.84) translateX(-4px) translateY(-4px) rotateZ(0);
}
.avatar-image:hover {
    transform: scale(1.2) rotateZ(0);
}