CSS first rotate tranformation not working as expected

Question

I have created a cube in CSS that I want to rotate using sliders, which control the rotation of the X, Y, and Z axes, respectively. Upon update of an of these sliders, I run the following function.

What I expect to happen is that all the rotations behave in the same way, that is rotate the cube either along the relative axis or the absolute axis, but something unexpected happens. The rotateX continuously rotates the cube along the absolute axis, whereas the rotateY and rotateZ rotate it along the cube's axis. It is even more confusing because when I switch the order, the first rotation always follows absolute rotation, whereas the following are relative. What should I do here and why does this happen?

let input_x = document.querySelector(".slider_x");
let input_y = document.querySelector(".slider_y");
let input_z = document.querySelector(".slider_z");

const recalibrate = function() {
  angle_x = input_x.value;
  angle_y = input_y.value;
  angle_z = input_z.value;
  cube.style.transform = "rotateX(" + angle_x + "deg) rotateY(" + angle_y + "deg) rotateZ(" + angle_z + "deg)";
}

let cube = document.querySelector(".cube");

input_x.addEventListener("input", recalibrate);
input_y.addEventListener("input", recalibrate);
input_z.addEventListener("input", recalibrate);

.cube {
  width: 200px;
  height: 200px;
  position: fixed;
  top: 30%;
  left: 40%;
  transform-style: preserve-3d;
}

.white_face {
  width: 200px;
  height: 200px;
  position: fixed;
  background-color: black;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  transform: translateZ(-100px) rotateZ(180deg);
}

.white_face>div {
  background-color: white;
  border: 4px solid black;
  border-radius: 8px;
}

.red_face {
  width: 200px;
  height: 200px;
  position: fixed;
  background-color: black;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  transform: translateX(100px) rotateY(90deg) rotateZ(90deg);
}

.red_face>div {
  background-color: red;
  border: 4px solid black;
  border-radius: 8px;
}

.green_face {
  width: 200px;
  height: 200px;
  position: fixed;
  background-color: black;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  transform: translateY(-100px) rotateX(90deg);
}

.green_face>div {
  background-color: rgb(23, 224, 23);
  border: 4px solid black;
  border-radius: 8px;
}

.orange_face {
  width: 200px;
  height: 200px;
  position: fixed;
  background-color: black;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  transform: translateX(-100px) rotateY(90deg) rotateZ(90deg);
}

.orange_face>div {
  background-color: rgb(251, 147, 42);
  border: 4px solid black;
  border-radius: 8px;
}

.blue_face {
  width: 200px;
  height: 200px;
  position: fixed;
  background-color: black;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  transform: translateY(100px) rotateX(90deg);
}

.blue_face>div {
  background-color: blue;
  border: 4px solid black;
  border-radius: 8px;
}

.yellow_face {
  width: 200px;
  height: 200px;
  background-color: black;
  position: fixed;
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  transform: translateZ(100px) rotateZ(90deg);
}

.yellow_face>div {
  background-color: yellow;
  border: 4px solid black;
  border-radius: 8px;
}

<div class="cube">
  <div class="white_face">
    <div id="W0"></div>
    <div id="W1"></div>
    <div id="W2"></div>
    <div id="W3"></div>
    <div id="W4"></div>
    <div id="W5"></div>
    <div id="W6"></div>
    <div id="W7"></div>
    <div id="W8"></div>
  </div>
  
  <div class="red_face">
    <div id="R2"></div>
    <div id="R1"></div>
    <div id="R0"></div>
    <div id="R5"></div>
    <div id="R4"></div>
    <div id="R3"></div>
    <div id="R8"></div>
    <div id="R7"></div>
    <div id="R6"></div>
  </div>
  
  <div class="green_face">
    <div id="G2"></div>
    <div id="G1"></div>
    <div id="G0"></div>
    <div id="G5"></div>
    <div id="G4"></div>
    <div id="G3"></div>
    <div id="G8"></div>
    <div id="G7"></div>
    <div id="G6"></div>
  </div>
  
  <div class="orange_face">
    <div id="O0"></div>
    <div id="O1"></div>
    <div id="O2"></div>
    <div id="O3"></div>
    <div id="O4"></div>
    <div id="O5"></div>
    <div id="O6"></div>
    <div id="O7"></div>
    <div id="O8"></div>
  </div>
  
  <div class="blue_face">
    <div id="B0"></div>
    <div id="B1"></div>
    <div id="B2"></div>
    <div id="B3"></div>
    <div id="B4"></div>
    <div id="B5"></div>
    <div id="B6"></div>
    <div id="B7"></div>
    <div id="B8"></div>
  </div>
  
  <div class="yellow_face">
    <div id="Y2"></div>
    <div id="Y1"></div>
    <div id="Y0"></div>
    <div id="Y5"></div>
    <div id="Y4"></div>
    <div id="Y3"></div>
    <div id="Y8"></div>
    <div id="Y7"></div>
    <div id="Y6"></div>
  </div>
</div>

<p style="color: white;">
  X
  <input type="range" class="slider_x" min="-0" max="360"><br> Y
  <input type="range" class="slider_y" min="0" max="360"><br> Z
  <input type="range" class="slider_z" min="0" max="360"><br>
</p>