<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 */
}
.avatar > img {
    animation: spin-reverse 3s infinite linear;
}
.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.