How do I make a CSS Rotating Animation?

In CSS, you can use the transform property to apply various transformations to elements, including rotations. The rotate function is used to rotate an element around its origin (which is typically the centre of the element).

Html

<div class="cercileimg">
<img src="images/img845.jpg">
</div>

Css

.cercileimg {
text-align: center;
position: relative;
}
.cercileimg img {
border-radius: 50%;
width: 150px;
position: relative;
z-index: 1;
}
.cercileimg::before {
content: "";
position: absolute;
top: -6px;
left: 50%;
transform: translateX(-50%);
width: 160px;
height: 160px;
border-radius: 50%;
background: linear-gradient(180deg, red 50%, green 50%);
transition: all ease 0.8s;
z-index: 0;
}
.cercileimg:hover::before {
transform: rotate(180deg) translate(50%);
transition: all ease 0.8s;
}