JADE
p The second rotate3d in animation does the trick of swapping sides during rotation
.cube
each val in ['front', 'back', 'left', 'right', 'top', 'bottom']
div(class='cube_side cube_side--' + val)
SCSS
$cube-size: 200px;
html, body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
p { margin-bottom: 100px; }
.cube {
width: $cube-size;
height: $cube-size;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s ease-in-out;
animation: cube-rotate 10s infinite linear;
}
@keyframes cube-rotate {
0% {
transform: rotate3d(1, 1, 0, 0deg) rotate3d(0, 0, 1, 0deg);
}
100% {
transform: rotate3d(1, 1, 0, 360deg) rotate3d(0, 0, 1, 180deg);
}
}
.cube_side {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.9;
}
@each $side, $rotate in ('front', (0, 1, 0, 0deg)),
('back', (0, 1, 0, 180deg)),
('left', (0, 1, 0, -90deg)),
('right', (0, 1, 0, 90deg)),
('top', (1, 0, 0, 90deg)),
('bottom', (1, 0, 0, -90deg)) {
$color: (random(256)-1, random(256)-1, random(256)-1);
.cube_side--#{$side} {
background-color: rgb($color...);
transform: rotate3d($rotate...) translateZ(#{$cube-size / 2});
}
}
