Воссоздание анимации загрузки вращающегося куба Reddit ⇐ CSS

[Anonymous]

Я пытаюсь воссоздать эту анимацию загрузки вращающегося куба из файлов reddit.fm/f/ntjq5sparw, используя html и css. Мне удалось настроить внешний куб с границами по бокам, а также внутренний куб с заполненными сторонами. Единственное, чего я не могу понять, так это как показать цвет фона только для сторон кубика, находящихся сзади.
Я зашел так далеко:

Код: Выделить всё

body{
margin: 0;
height: 100vh;
display: grid;
place-items: center;
perspective: 1000px;
}
@keyframes rotate {
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(90deg);
}
}
.container{
transform-style: preserve-3d;
transform: rotateX(-25deg) rotateY(45deg);
}
.cube{
width: var(--size);
height: var(--size);
position: relative;
transform-style: preserve-3d;

display: grid;
place-items: center;

& > .side{
position: absolute;
width: var(--size);
height: var(--size);
background-color: transparent;
box-sizing: border-box;
border: solid 10px black;

&:nth-of-type(1){
transform: translateZ(calc(var(--size) / 2));
}
&:nth-of-type(2){
transform: translateZ(calc(var(--size) / -2));
}
&:nth-of-type(3){
transform: rotateX(90deg) translateZ(calc(var(--size) / 2));
}
&:nth-of-type(4){
transform: rotateX(90deg) translateZ(calc(var(--size) / -2));
background-color: red;
}
&:nth-of-type(5){
transform: rotateY(90deg) translateZ(calc(var(--size) / 2));
}
&:nth-of-type(6){
transform: rotateY(90deg) translateZ(calc(var(--size) / -2));
}
}

&.main{
animation: rotate 1s infinite ease-in-out;
}
&:not(.main) > .side{
border: none;
background-color: black;
}
}

Я пробовал использовать CSS-свойство backface-visibility: Hidden для сторон, но оно не работает, поскольку куб вращается целиком, а стороны устойчивы. поместить внутрь куба. Я также попробовал обходной путь с использованием анимации цвета фона, но это кажется слишком хакерским, и очень сложно угадать правильные числа для точного момента, когда фон должен быть прозрачным, потому что временная шкала анимации не является линейной.

Подробнее здесь: https://stackoverflow.com/questions/786 ... -animation