<figure>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</figure>
html, body {
margin:0;
padding:0;
background: #000;
overflow: hidden;
}
figure {
margin:0;
padding:0;
position: absolute;
display: block;
top: 50%;
left: 50%;
width: 60vw;
height: 60vw;
animation: 7s anim linear infinite;
transform-origin: right center;
margin: -30vw 0 0 -60vw;
backface-visibility: hidden;
}
figure div {
width: 60vw;
height: 60vw;
position: absolute;
top: 0;
left: 0;
border-radius: 60vw;
transform-origin: right center;
backface-visibility: hidden;
}
@for $i from 1 through 10 {
figure div:nth-child(#{$i}) {
z-index: 10-$i;
box-shadow: 8.05vw 20.5vw 0 0 lighten(#A60000, 10-$i) inset;
transform: rotate(#{36 * $i}deg) translate3d(0,0,0);
}
}
@keyframes anim {
0% {
transform: rotate(0deg) translate3d(0,0,0);
}
100% {
transform: rotate(360deg) translate3d(0,0,0);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.