I am trying to recreate this rotating cube loading animation from reddit files.fm/f/ntjq5sparw using html and css. I managed to setup the outer cube with borders on it’s sides aswell as the inner cube with filled sides. The only thing I can’t figure out is how to only show the background color of the cubes sides that are in the back.
I’ve come this far:
<style>
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;
}
}
</style>
<body>
<div class="container">
<div class="cube main" style="--size: 200px;">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="cube" style="--size: 100px;">
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
<div class="side"></div>
</div>
</div>
</div>
</body>
I’ve tried using the backface-visibility: hidden css property on the sides which does’nt work because the cube is rotated as a whole and the sides are steady in place inside the cube. I’ve also tried a workaround using background-color animation but that seems just too hacky and it’s very hard to guess the correct numbers for the exact moment the background should be transparent because the animation-timeline is not linear.
Speckolazius is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.