如何在单个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>我知道我可能需要应用一些数学运算才能使它起作用，但我对线性代数一无所知。有没有实现我想要的方案？