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

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

.common {
  width: 50%; 
  height: 50%;
  position: absolute;
  left: 25%;
  top: 25%;
  /* border: 1px solid #333; */
  animation: rotate 60s linear infinite;
}

.top {
  position: absolute;
  left: 25%;
  top: -25%;
  border: 1px solid #333;
  transform-origin: center 150%;
}

.right {
  position: absolute;
  left: 75%;
  top: 25%;
  transform-origin: -50% center;
}

.bottom {
  position: absolute;
  left: 25%;
  top: 75%;
  transform-origin: center -50%;
}

.left {
  position: absolute;
  left: -25%;
  top: 25%;
  transform-origin: 150% center;
}

.content {
  width: 100%; 
  height: 100%;
  border: 1px solid #333;
  animation: rotate 60s linear reverse infinite;
  word-wrap: break-word;
}

@keyframes rotate { 
  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.