<div class="circle">
  <div class="content top">top</div>
  <div class="content right">right</div>
  <div class="content bottom">bottom</div>
  <div class="content left">left</div>
</div>
body {
  width: 400px;
  margin: 100px auto;
}

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

.content {
  width: 50%; 
  height: 50%;
  position: absolute;
  left: 25%;
  top: 25%;
  border: 1px solid #333;
}

/* top */
.top { 
  animation: rotate_top 60s linear infinite;
}
@keyframes rotate_top { 
  0% { 
   transform: rotate(0deg) translateY(-100%) rotate(0deg);
  }
	100% {  
    transform: rotate(360deg) translateY(-100%) rotate(-360deg);
  }
}

/* right */
.right { 
  animation: rotate_right 60s linear infinite;
}
@keyframes rotate_right { 
  0% { 
   transform: rotate(0deg) translateX(100%) rotate(0deg);
  }
	100% {  
    transform: rotate(360deg) translateX(100%) rotate(-360deg);
  }
}

/* bottom */
.bottom { 
  animation: rotate_bottom 60s linear infinite;
}
@keyframes rotate_bottom { 
  0% { 
   transform: rotate(0deg) translateY(100%) rotate(0deg);
  }
	100% {  
    transform: rotate(360deg) translateY(100%) rotate(-360deg);
  }
}

/* left */
.left { 
  animation: rotate_left 60s linear infinite;
}
@keyframes rotate_left { 
  0% { 
   transform: rotate(0deg) translateX(-100%) rotate(0deg);
  }
	100% {  
    transform: rotate(360deg) translateX(-100%) rotate(-360deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.