<div class="path">
  <img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1507/logo_w3cplus.png"  class="avatar"/>
</div>
@keyframes spin{
  from{
    transform: rotate(0turn) translateY(-150px) translateY(50%) rotate(1turn);
  }
  to {
    transform: rotate(1turn) translateY(-150px) translateY(50%) rotate(0turn);
  }
}
.avatar {
 animation: spin 3s infinite linear;
}
.avatar {
	display: block;
	width: 50px;
	margin: calc(50% - 25px) auto 0;
	border-radius: 50%;
	overflow: hidden;
}

.path {
	width: 300px; 
  height: 300px;
	padding: 20px;
	margin: 100px auto;
	border-radius: 50%;
	background: #fb3;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.