<main>
<div class="root">
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
main {
display: flex;
width: 100%;
height: 100vh;
justify-content: center;
align-items: center;
}
div.root {
position: relative;
width: 320px;
height: 320px;
top: 0;
left: 0;
}
div {
--size: 80%;
box-sizing: border-box;
position: absolute;
top: calc((100% - var(--size)) / 2);
left: calc((100% - var(--size)) / 2);
width: var(--size);
height: var(--size);
border: 1px solid black;
transform: rotate(15deg);
animation: rot 1000ms ease 0ms;
}
@keyframes rot {
from {
transform: rotate(0);
}
to {
transform: rotate(15deg);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.