<div id="circle">
  <div class="content1">1</div>
</div>
body {
  width: 400px;
  margin: 100px auto;
}

#circle { 
  width: 300px;
  height: 300px;
  border: 1px solid #333;
  border-radius: 50%;
  position: relative;
}

.content1 { 
  width: 50%; 
  height: 50%;
  position: absolute;
  left: 25%;
  top: -25%;
  border: 1px solid #333;
   transform-origin: center 150%;
  animation: rotate1 20s linear infinite;
}

@keyframes rotate1 { 
  0% {
   transform: rotate(0deg);
  }
	100% {  
    transform: rotate(360deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.