如何在单个rotate3d（）调用上应用多个轴旋转？

Question

我正在尝试使用单个rotate3d函数同时旋转一个多维数据集的多个轴，但是却出现了怪异的旋转。

如果我使用，transform: rotateX(-30deg) rotateY(45deg)我会看到一个不错的角度，但是如果我使用，我transform: rotate3d(-2, 3, 0, 15deg)的角度看起来会很奇怪。

* { box-sizing: border-box; }

.scene {

  width: 50px;

  height: 50px;

}

.cube {

  width: 50px;

  height: 50px;

  margin: 50px;

  position: relative;

  transform-style: preserve-3d;

  transform: rotateX(-30deg) rotateY(45deg); /* works as expected */

  /* transform: rotate3d(-2, 3, 0, 15deg); */ /* looks very weird */

  transition: transform 1s;

}

.cube__face {

  position: absolute;

  width: 50px;

  height: 50px;

  border: 1px solid black;

}

.cube__face--front  {

  background: hsla(  0, 100%, 50%, 0.7);

  transform: rotateY(  0deg) translateZ(25px);

}

.cube__face--right  {

  background: hsla( 60, 100%, 50%, 0.7);

  transform: rotateY( 90deg) translateZ(25px);

}

.cube__face--back   {

  background: hsla(120, 100%, 50%, 0.7);

  transform: rotateY(180deg) translateZ(25px);

}

.cube__face--left   {

  background: hsla(180, 100%, 50%, 0.7);

  transform: rotateY(-90deg) translateZ(25px);

}

.cube__face--top    {

  background: hsla(240, 100%, 50%, 0.7);

  transform: rotateX( 90deg) translateZ(25px);

}

.cube__face--bottom {

  background: hsla(300, 100%, 50%, 0.7);

  transform: rotateX(-90deg) translateZ(25px);

}

<div class="cube">

  <div class="cube__face cube__face--front"></div>

  <div class="cube__face cube__face--back"></div>

  <div class="cube__face cube__face--right"></div>

  <div class="cube__face cube__face--left"></div>

  <div class="cube__face cube__face--top"></div>

  <div class="cube__face cube__face--bottom"></div>

</div>

我知道我可能需要应用一些数学运算才能使它起作用，但我对线性代数一无所知。有没有实现我想要的方案？