console
<div class="camera">
<div class="container">
<div style="--i:0"></div>
<div style="--i:1"></div>
<div style="--i:2"></div>
<div style="--i:3"></div>
<div style="--i:4"></div>
<div style="--i:5"></div>
</div>
</div>
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
}
.camera {
transform-style: preserve-3d;
transform: rotateX(55deg);
}
.container {
--size: 15rem;
position: relative;
width: var(--size);
height: var(--size);
transform-style: preserve-3d;
animation: _animate 6s linear infinite;
}
.container div {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
background: radial-gradient(transparent,cyan);
transform: rotateY(calc(var(--i) * 60deg)) translateZ(calc(var(--size) * 1));
filter: hue-rotate(calc(var(--i) * 60deg));
-webkit-box-reflect: below 1px linear-gradient(transparent,transparent,#0004);
}
@keyframes _animate{
100%{
transform: rotateY(360deg);
}
}