<div class="path">
   <div class="avatar">
       <img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1507/logo_w3cplus.png" />
   </div>
</div>
@keyframes spin {
  to { 
    transform: rotate(1turn); 
  }
}
@keyframes spin-reverse {
  from { 
    transform: rotate(1turn); 
  }
}
.avatar {
  animation: spin 3s infinite linear;
  transform-origin: 50% 150px; /* 150px = path radius */
  
  img {
    animation: inherit;
    animation-name: spin-reverse;
  }
}

.path {
	width: 300px; 
  height: 300px;
	padding: 20px;
	border-radius: 50%;
	background: #fb3;
  margin: 50px auto;
}
.avatar {
	width: 50px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
  
  img {
    display: block;
    width: inherit;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.