Loader 3D avec des variables CSS
HTML
index.html <div class="view">
<div class="plane">
<div class="circle" style="--index:1"></div>
<div class="circle" style="--index:2"></div>
<div class="circle" style="--index:3"></div>
<div class="circle" style="--index:4"></div>
<div class="circle" style="--index:5"></div>
<div class="circle" style="--index:6"></div>
</div>
</div>
CSS
style.css @layer demo {
:root {
--side: 200px;
}
.view {
perspective: 400;
.plane {
width: var(--side);
height: var(--side);
transform-style: preserve-3d;
transform: rotateX(60deg) rotateZ(-30deg);
animation: rotate 20s infinite linear;
.circle {
width: var(--side);
height: var(--side);
position: absolute;
transform-style: preserve-3d;
border-radius: 100vmax;
border: 2px solid white;
box-sizing: border-box;
transform: rotateZ(calc(var(--index) / 6 * 360deg)) rotateX(63.435deg);
box-shadow: 0 0 60px hsl(calc(var(--index) * 60deg), 50%, 50%, 100%),
inset 0 0 60px hsl(calc(var(--index) * 60deg), 50%, 50%, 100%);
animation: rotateCircle 3s ease-in-out infinite forwards
calc(var(--index) * 0.5s);
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
border-radius: 100vmax;
border: 2px solid hsla(0deg 50% 100% / 100%);
top: 0;
left: 0;
transform: translate3d(0px, 250px, 0px);
box-shadow: 0 0 60px hsl(calc(var(--index) * 72deg) 50% 50% / 30%),
inset 0 0 60px hsl(calc(var(--index) * 72deg) 50% 50% / 30%);
filter: blur(60px);
}
}
}
}
@keyframes rotateCircle {
0%,
100% {
transform: rotateZ(calc(var(--index) / 6 * 360deg)) rotateX(63.435deg)
scale(1);
}
50% {
transform: rotateZ(calc(var(--index) / 6 * 0deg)) rotateX(63.435deg)
scale(calc(var(--index) / 6));
}
}
@keyframes rotate {
0% {
transform: rotateX(0) rotateY(0) rotateZ(0);
}
100% {
transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
}
}
}