<div class="path">
<img src="https://www.w3cplus.com/sites/default/files/blogs/2015/1507/logo_w3cplus.png" class="avatar" />
</div>
@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = path radius */
}
.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;
display: block;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.