CSS transform rotate() X axis behaves differently from Y and Z

While working on animating a cube in CSS, I found myself that after performing a 90° rotation on Y axis, if the next rotation happened on X axis, it behaved as if it were on Z axis.
I worked on a visual representation of the space axes to be able to debug the behaviour and it looks like the X axis effectively has a dynamic orientation, meaning the rotations happen accordingly to the element own X axis, while on Y and Z axis, the rotations are always relative to the viewport.
Is this behaviour normal?
Am I missing something?

I made this codepen to debug the behaviour.
Scroll down in the viewport to perform the rotations.

HTML:

<div id="container">
  <div id="square" class="square">
  <h4 class="v v1">1</h4>
  <h4 class="v v2">2</h4>
  <h4 class="v v3">3</h4>
  <h4 class="v v4">4</h4>
</div>
  <div id="square2" class="square">
  <h4 class="v v1">1</h4>
  <h4 class="v v2">2</h4>
  <h4 class="v v3">3</h4>
  <h4 class="v v4">4</h4>
</div>
</div>

<div id="scrollElement"></div>

body {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container {
  position:fixed;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  transform-style: preserve-3d;
  perspective: 1000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#square, #square2 {
  width: 200px;
  height: 200px;
  background: red;
  position:relative;
  margin:120px;
  transform-style: preserve-3d;
}

.square h4 {
  margin:0;
  color:#000;
  font-size:30px;
  font-weight: bold;
  background: #FFF;
  padding:3px;
  width:40px;
  height:40px;
  border-radius: 5px;
  border: 2px solid #000;
  text-align: center;
}

.v {
  position:absolute;
}

.v1 {
  top:10px;
  left:10px;
}

.v2 {
  top:10px;
  right:10px;
}

.v3 {
  bottom:10px;
  right:10px;
}

.v4 {
  bottom:10px;
  left:10px;
}

#scrollElement {
  height: 10000px;
  width: 100vw;
}

gsap.registerPlugin(ScrollTrigger);

const tl = gsap.timeline();

ScrollTrigger.create({
  animation: tl,
  trigger: "#scrollElement",
  start: "top top",
  end: "100% 100%",
  scrub: 0.2
});

tl.to("#square", { rotateY: "90deg", ease: "circ.out", duration: 5 })
  .to("#square", { rotationZ: "90deg", ease: "circ.out", duration: 5 }, "<1")
  .to("#square", {
    rotateX: "90deg",
    ease: "linear",
    duration: 5
  });

////////////////////////////////////////

const el = document.querySelector("#square");
const { width, height } = el.getBoundingClientRect();
console.log(width, height);
const axes = {
  x: {
    rotate: "rotateZ(90deg)",
    rotatePerp: "rotateZ(90deg) rotateY(90deg)",
    top: "50%",
    left: "50%",
    translate: `translate(0, -${height}px)`,
    translatePerp: `translate3d(0px, -${height}px, -${height}px)`,
    color: "green"
  },
  y: {
    rotate: "",
    rotatePerp: "rotateY(90deg)",
    top: "50%",
    left: "50%",
    translate: `translate(0, -${height}px)`,
    color: "yellow"
  },
  z: {
    rotate: "rotateZ(90deg) rotateX(90deg)",
    rotatePerp: "rotateX(90deg)",
    top: "50%",
    left: "50%",
    translate: `translate(0px, -${height}px)`,
    color: "blue"
  }
};
for (const key in axes) {
  const axis = axes[key];
  const div = document.createElement("div");
  const div1 = document.createElement("div");
  div.id = key;
  div.style.transform = axis.translate + " " + axis.rotate;
  div.style.top = axis.top;
  div.style.left = axis.left;
  div.style.backgroundColor = axis.color;
  div.style.width = "5px";
  div.style.height = height*2 + "px";
  div.style.position = "absolute";
  div.innerHTML = `<h4>${key}</h4>`;
  // Perpendicular axis
  div1.id = key + "_" + "perp";
  div1.style.transform = axis.translate + " " + axis.rotatePerp;
  div1.style.top = axis.top;
  div1.style.left = axis.left;
  div1.style.backgroundColor = axis.color;
  div1.style.width = "5px";
  div1.style.height = height*2 + "px";
  div1.style.position = "absolute";
  div1.innerHTML = `<h4>${key}</h4>`;
  el.appendChild(div);
  el.appendChild(div1);
}

This happens for all three axes, not just the x axis and it's how it should work, per spec. Transforms applied on an element are always relative to its local coordinate system.

If you rotate an element around the z axis by 90deg and then around its y axis, it's going to look as if the second rotation is relative to the x axis of the viewport. In fact, it's always relative to its own coordinate system.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

div {
display: grid;
place-content: center;
margin: 2em;
width: 9em;
height: 9em;
box-shadow: 0 0 0 2px red;
transform: 
perspective(25em) 
rotatez(90deg) rotatey(45deg)
}

<!-- language: lang-html -->

<div>rotatez(90deg)<br>rotatet(45deg)</div>

<!-- end snippet -->

Initially, the x axis of an element's local coordinate system points towards 3 o'clock, its y axis points down, towards 6 o'clock and its z axis points perpendicular out of the screen towards you.

A 90deg rotation around the z axis (positive rotations are clockwise) makes the x axis of the local coordinate system point down, towards 6 o'clock and makes the y axis of the local coordinate system point towards 9 o'clock. The axis we rotate around, in this case the z axis, remains unchanged following a rotation.

A subsequent 90deg around the y axis (now pointing towards 9 o'clock, along the same line as the viewport's x axis) makes the x axis of the local coordinate system go from pointing down towards 6 o'clock to pointing perpendicular onto the screen, towards the back of it and the z axis go from pointing perpendicular out of the screen towards you to pointing down, towards 6 o'clock. This makes it look like the rotation happens relative to the viewport's x axis.

A third rotation around the z axis happens around the z axis that's now pointing down. This makes it look as if this rotation is happening around the viewport's y axis.

This was explained better, and then solved and answered here. Basically:

> Yeah, it's an order of operation thing. 3D rotations can get mind-bending and gimbal lock is thorny. One of GSAP's strengths is its consistent order of operation. That's what allows you to animate each component (x, y, z, scaleX, scaleY, rotation, etc.) independently and always get clean results. In 99.9% of the cases, this is exactly what everyone wants. But if you've got one of those extremely rare edge cases where you actually want to CHANGE the order of operation, then you'd need to do that yourself in an onUpdate. You can still use GSAP to animate the values, of course, but you'd need to manage the strings.