3d cube swapping sides during rotation

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}); } }
JAVASCRIPT
Expand for more options Login