Edit in JSFiddle

<div class="cube">
  <div class="face front">front</div>
  <div class="face back">back</div>
  <div class="face left">left</div>
  <div class="face right">right</div>
  <div class="face top">top</div>
  <div class="face bottom">bottom</div>
</div>

<div id="panel">
  <div>Rotate X <input id="rotX" type="range" min="-180" max="180" value="0" oninput="document.body.style.setProperty('--rotX', this.value + 'deg')" /></div>
  <div>Rotate Y <input id="rotY" type="range" min="-180" max="180" value="0" oninput="document.body.style.setProperty('--rotY', this.value + 'deg')" /></div>
  <div>Rotate Z <input id="rotZ" type="range" min="-180" max="180" value="0" oninput="document.body.style.setProperty('--rotZ', this.value + 'deg')" /></div>
  <div>
    <button onclick="reset()">Reset</button>
  </div>
</div>

body {
  /* Set the size of the sides of the cube here */
  --S: 150px;
  /* Rotation variables */
  --rotX: 30deg;
  --rotY: 30deg;
  --rotZ: 0deg;
  
  /* Set perspective */
  perspective: 800px;
}
/* Common properties for all faces:  position absolute and size */
.face {
  position: absolute;
  width: var(--S);
  height: var(--S);
}

.cube {
  transform-style: preserve-3d;
  /* transform-origin: center center; */
  width: var(--S);
  height: var(--S);
}

.face.front { transform: translateZ(calc(var(--S) / 2)); }
.face.back { transform: rotateY(180deg) translateZ(calc(var(--S) / 2)); }
.face.left { transform: rotateY(-90deg) translateZ(calc(var(--S) / 2)); }
.face.right { transform: rotateY(90deg) translateZ(calc(var(--S) / 2)); }
.face.top { transform: rotateX(90deg) translateZ(calc(var(--S) / 2)); }
.face.bottom { transform: rotateX(-90deg) translateZ(calc(var(--S) / 2)); }

/* Colors and text position */
.face { line-height: var(--S); text-align: center; color: white; font-size: calc(var(--S) / 4); }
.front { background-color: rgba(255, 0, 0, 0.5); }
.back { background-color: rgba(0, 255,  0, 0.5); }
.left { background-color: rgba(0, 0, 255, 0.5); }
.right { background-color: rgba(0, 255, 255, 0.5); }
.top { background-color: rgba(255, 0, 255, 0.5); }
.bottom { background-color: rgba(255, 255, 0, 0.5); }

/* Rotate a bit to show something 3D */
.cube { transform: rotateX(var(--rotX)) rotateY(var(--rotY)) rotateZ(var(--rotZ)); }
.cube { border: solid 1px black; }
.cube { margin: 50px auto 0 auto; }

/* Set the values of the sliders to the values of the --rot variables */
function setSliders() {
  let style = window.getComputedStyle(document.body); // Compute style of the body
  document.getElementById('rotX').value = style.getPropertyValue('--rotX').replace('deg', '').trim();
  document.getElementById('rotY').value = style.getPropertyValue('--rotY').replace('deg', '').trim();
  document.getElementById('rotZ').value = style.getPropertyValue('--rotZ').replace('deg', '').trim();
}

/* Set all variables to 0 and update the sliders  */
function reset() {
  document.body.style.setProperty('--rotX', '0deg');
  document.body.style.setProperty('--rotY', '0deg');
  document.body.style.setProperty('--rotZ', '0deg');
  
  setSliders();
}

/* Set the slider values on startup */
setSliders();