transform-rotate

HTML

<html>
  <body>
    <div id=scene1>
      <div id=div1></div>
    </div>
    <div id=scene2>
      <div id=div2></div>
    </div>
    <div>
    Combined result:
    </div>
    
    <div id=scene3>
      <div id=div3></div>
    </div>
  </body>
</html>

SCSS

body {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 0;
  #scene1, #scene2, #scene3 {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 10em;
    width: 10em;
    perspective: 20em;
    perspective-origin: 50% -50%;
    #div1 {
      background: red;
      height: 4em;
      width: 4em;
      position: absolute;
      transform: rotate3d(0, 0, 1, 45deg);
    }
    #div2 {
      background: green;
      height: 4em;
      width: 4em;
      position: absolute;
      transform: rotate3d(1, 0, 0, 90deg);
    }
    #div3 {
      background: blue;
      height: 4em;
      width: 4em;
      position: absolute;
    }
  }
}

JavaScript

var element = document.getElementById("div1");
var style = window.getComputedStyle(element);

//this will (probably) give you a matrix(..) transform representing the current transform of the element
var currentTransform = document.getElementById("div3").style.transform;

console.log(currentTransform)

//prepend another rotate3d transform to the current transform
document.getElementById("div3").style.transform = "rotate3d(1,0,0,90deg) "+style.transform;