Rotate A Image In 360 Degree Angle With Same Position By CSS3

how to make smooth and gradual transitions, let’s look at CSS transforms – how to make an element change from one state to another. With the CSS transform property, you can rotate, move, skew, and scale elements.

With the rotate value, the element rotates clockwise or counterclockwise by a specified number of degrees. A positive value, such as 90deg, rotates the element clockwise, while a negative value, such as -90deg, rotates it counterclockwise.

<div class="roatate_me">  
  <img src="https://www.freeiconspng.com/uploads/smile-png-photo-19.png" alt="">
</div>

/*  #################### cycle ##################### */

@keyframes r {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes r1 {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.roatate_me {
  width: 300px;
  height: 300px;
  position: absolute;
  border-radius: 100%;
  top: 20%;
  left: 45%;
  transform: translateY(-50%);
  transform: translateX(-50%);
  border: 1px solid #ccc;

  animation-name: r;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.roatate_me img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  transform: translateY(-50%);
  transform: translateX(-50%);
  animation-name: r1;
  animation-duration: 5000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}