Global rotations in css 3d

Question

I've been struggling with 3D CSS lately.

I have a cube (made as taught in this tutorial: http://desandro.github.io/3dtransforms/docs/cube.html)

I'm trying to allow the user to rotate it by 90 degrees vertically or horizontally to show another face, so I have two javascript functions:

document.getElementById('rot-x').addEventListener( 'click', function()
{
  rotX+=90;
  $('#cube').css("transform", 
  "translateZ(-100px) 
  rotateX("+rotX+"deg) 
  rotateY("+rotY+"deg) 
  rotateZ("+rotZ+"deg)");

  console.log("X:" + rotX + "\nY:" + rotY + "\nZ:" + rotZ); 
};

and

document.getElementById('rot-x').addEventListener( 'click', function()
{
  rotY+=90;
  $('#cube').css("transform", 
  "translateZ(-100px) 
  rotateX("+rotX+"deg) 
  rotateY("+rotY+"deg) 
  rotateZ("+rotZ+"deg)");

  console.log("X:" + rotX + "\nY:" + rotY + "\nZ:" + rotZ); 
};

The problem is that the rotation is local apparently, which means that the axes rotate together with the object. So if I rotate once on the X axis and once on the Y axis, that second rotation doesn't show another face, as the Y axis is now perpendicular to the screen.
I really need to know how to fix this, or find an alternate way to have the user switch cube faces

I need all of these actions to always be possible:

• Show face above the current one
• Show face below the current one
• Show face to the left of the current one
• Show face to the right of the current one