JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<div>
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS
body {
font-size: 80px;
}
div {
background: url('http://s3.amazonaws.com/somewherein/assets/images/thumbs/priyoblog_1358158936_1-sky_colors-wide.jpg') no-repeat;
background-size: cover;
border-radius: 500px;
display: flex;
justify-content: center;
align-items: center;
animation: rot 10s ease infinite;
}
div { width: 5em; height: 5em; transform: rotate(10deg); }
div > div { width: 4em; height: 4em; transform: rotate(12deg); }
div > div > div { width: 3em; height: 3em; transform: rotate(14deg); }
div > div > div > div { width: 2em; height: 2em; transform: rotate(16deg); }
div > div > div > div > { width: 1em; height: 1em; transform: rotate(18deg); }
@keyframes rot {
50% {
transform: rotate(360deg);
}
}