HTML
<div class="wrapper">
<div class='block'>
<div class='inner'></div>
</div>
<div class='block'>
<div class='inner'></div>
</div>
<div class='block'>
<div class='inner'></div>
</div>
<div class='block'>
<div class='inner'></div>
</div>
<div class='block'>
<div class='inner'></div>
</div>
<div class='block'>
<div class='inner'></div>
</div>
<div class='block'>
<div class='inner'></div>
</div>
<div class='block'>
<div class='inner'></div>
</div>
</div>
CSS
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background: #000;
}
.wrapper {
transform: rotate(90deg);
}
div, :before, :after {
position: absolute;
transform-style: preserve-3d;
background: currentColor;
}
.block {
top: 50%;
left: 50%;
transform: rotateX(-35deg) rotateY(-45deg);
}
.block:nth-child(1) {
margin-left: -15.3125em;
color: #f90cae;
}
.block:nth-child(1) .inner {
animation-delay: 0s;
}
.block:nth-child(2) {
margin-left: -10.9375em;
color: #d50cae;
}
.block:nth-child(2) .inner {
animation-delay: -0.1875s;
}
.block:nth-child(3) {
margin-left: -6.5625em;
color: #b20cae;
}
.block:nth-child(3) .inner {
animation-delay: -0.375s;
}
.block:nth-child(4) {
margin-left: -2.1875em;
color: #8e0cae;
}
.block:nth-child(4) .inner {
animation-delay: -0.5625s;
}
.block:nth-child(5) {
margin-left: 2.1875em;
color: #6b0cae;
}
.block:nth-child(5) .inner {
animation-delay: -0.75s;
}
.block:nth-child(6) {
margin-left: 6.5625em;
color: #470cae;
}
.block:nth-child(6) .inner {
animation-delay: -0.9375s;
}
.block:nth-child(7) {
margin-left: 10.9375em;
color: #240cae;
}
.block:nth-child(7) .inner {
animation-delay: -1.125s;
}
.block:nth-child(8) {
margin-left: 15.3125em;
color: #000cae;
}
.block:nth-child(8) .inner {
animation-delay: -1.3125s;
}
.inner {
animation: s 1s ease-in-out infinite alternate;
}
.inner, .inner:before, .inner:after {
width: 1.75em;
height: 1.75em;
content: "";
}
.inner:before {
transform: rotateY(90deg) translate3d(0.875em, 0, 0.875em);
filter: brightness(1.3);
}
.inner:after {
transform: rotateX(90deg) translate3d(0, -0.875em, 0.875em);
filter: brightness(1.6);
}
@keyframes s {
to { transform: scaleY(8); }
}
