<div class="container-scene">
  <div class="cube">
    <div class="face-1"></div>
    <div class="face-2"></div>
    <div class="face-3"></div>
    <div class="face-4"></div>
    <div class="face-5"></div>
    <div class="face-6"></div>
  </div>
</div>
:root {
  --scenePerspective: 400;
  --cubeRotateY: -45;
  --cubeRotateX: 0;
}

.container-scene {
  width: 200px;
  height: 200px;
  perspective: calc(var(--scenePerspective) * 1px);
  perspective-origin: 50% 50%;
}

.cube {
  width: 200px;
  height: 200px;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-100px) rotateY(calc(var(--cubeRotateY) * 1deg)) rotateX(calc(var(--cubeRotateX) * 1deg));
  
  div[class^='face-'], div[class*=' face-']{
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: inherit;
    border: 1px solid hsl(0,0,0);
  }
  
  .face-1 {
    transform: rotateY(0deg) translateZ(100px);
  }
  
  .face-2 {
    transform: rotateY(180deg) translateZ(100px);
  }
  
  .face-3 {
    transform: rotateY(90deg) translateZ(100px);
  }
  
  .face-4 {
    transform: rotateY(-90deg) translateZ(100px);
  }
  
  .face-5 {
    transform: rotateX(90deg) translateZ(100px);
  }
  
  .face-6 {
    transform: rotateX(-90deg) translateZ(100px);
  }
}


///-------------


* { box-sizing: border-box; }

body {
  background-color: hsl(231, 15%, 18%);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

  @for $i from 1 through 6 {
    .face-#{$i}{
      background-color: hsla(360 - $i * 60, 100%, 74%, 0.6);
      &::after {
        content: "#{$i}";
        font-size: 4rem;
        color: white;
      }
    }
  }
View Compiled
class Cube {
  constructor() {
    this.scenePerspective = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--scenePerspective"));
    this.cubeRotateY = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--cubeRotateY"));
    this.cubeRotateX = parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--cubeRotateX"));
  }
}

window.onload = function() {
  const cube = new Cube();
  const gui = new dat.GUI();
  const controllersCSS = {
    scenePerspective: gui.add(cube, "scenePerspective", 0, 4000),
    cubeRotateY: gui.add(cube, "cubeRotateY", -360, 360),
    cubeRotateX: gui.add(cube, "cubeRotateX", -360, 360)
  };

  for (let key in controllersCSS) {
    controllersCSS[key].onChange(value => {
      document.documentElement.style.setProperty(`--${key}`, value);
    });
  }
};
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js