<div class="boxes">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<!-- Add more nested divs here to add more boxes.
No CSS changes needed. -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
.boxes,
.boxes div {
/* Starting size: */
width: 20px;
height: 20px;
/* Adjust the speed or timing function of the animation here. */
animation: 18s rotate infinite linear;
transform: translate(-50%, -50%);
position: relative;
border: 2px solid #000;
}
.boxes div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 120%;
height: 120%;
}
@keyframes rotate {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
/* Background. */
body {
margin: 0;
background: linear-gradient(#FFF, #AAA);
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.