How to make like this avatar

[Binkaddas]

How to make like this avatar

1- When the mouse passes over the image, it rotates and then changes to a circle.

2- Then after removing the mouse, its shape returns to square.

Example of the form

 

[Binkaddas]

i try to use ChatGPT and i got this code, if anyone can also updated

.avatar.avatar--l,
.avatar.avatar--m,
.avatar.avatar--s,
.avatar.avatar--xxs,
.avatar.avatar--xs {
    border-radius: 0 !important; /* Ensures the avatars are square */
    transition: transform 0.3s ease; /* Smooth transition for rotation */
}

.avatar.avatar--l:hover,
.avatar.avatar--m:hover,
.avatar.avatar--s:hover,
.avatar.avatar--xxs:hover,
.avatar.avatar--xs:hover {
    transform: rotate(360deg); /* Rotate the avatar 360 degrees */
}