:root {
  --yTranslateValue: 12;
  --xTranslateValue: 15;
  --zTranslateValue: 0;
  --xRotateValue: 10deg;
  --yRotateValue: 0;
  --zRotateValue: 0;
  --test: green;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  width: 100vw;
  font-size: 18px;
  background-color: hsl(0, 0, 7);
}
body {
  background: radial-gradient(rgb(0, 162, 255) -1000px, blue);
  background: var(--test);
  display: flex;
  flex-direction: column;
}
#cont {
  height: 60vh;
  width: 30vw;
  position: absolute;
  top: 50vh;
  left: 50vw;
  perspective: 1000px;
  transform: translate(-50%, -50%); /* wtf! lol try display:flex  */
}
#box {
  height: 250px;
  width: 250px;
  position: absolute;
  top: 100px;
  left: 50px;
  /*   transform: rotate(-90deg); */
  transform-style: preserve-3d;
  /*   transform:rotate3d(1, 0, 0, var(--xTranslateValue)) 
            rotate3d(0, 1, 0, var(--yTranslateValue)) 
            rotate3d(0, 0, 1, var(--zTranslateValue)); */

  /* transform: rotateY(var(--yTranslateValue)) rotateX(var(--xTranslateValue)) rotateZ(var(--zTranslateValue)); */
  /* transform: rotate3d(206,2,200,200deg); */
  transform: translate3d(
      var(--xTranslateValue),
      var(--yTranslateValue),
      var(--zTranslateValue)
    )
    rotateX(var(--xRotateValue)) rotateY(var(--yRotateValue))
    rotateZ(var(--zRotateValue));
}
.face {
  font-size: 32px;
  width: 250px;
  height: 250px;
  background-color: #121d31;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 100px 0px; /* why padding? */
  border: 4px solid #fff;
  position: absolute;
}
.left {
  right: 125px;
  transform: rotateY(-90deg);
}
.right {
  left: 125px;
  transform: rotateY(-90deg) rotateY(180deg);
}

.front {
  transform: translateZ(125px);
}
.bottom {
  top: 125px;
  transform: rotateX(90deg) rotateZ(180deg) rotateY(180deg);
}
.up {
  bottom: 125px;
  transform: rotateX(-90deg) rotateZ(180deg) rotateY(180deg);
}
.back {
  transform: translateZ(-125px) rotateY(180deg);
}
#sliders {
  position: relative;
  top: 70vh;
  align-self: center;
  display: flex;
  text-align: center;
  min-width: 50vw;
  justify-content: space-evenly;
}
.resetBtn {
  position: absolute;
  bottom: -2rem;
  padding: 0.5rem;
}
input {
  margin-right: 0.1rem;
}
#rotateXAxis {
  /*   transform: rotate(90deg); */
}