javascript - 使用 css 和 javascript 旋转立方体时保持固定轴

Question

我有一个用 html 和 css 制作的立方体，使用 javascript，当我按下键盘上的箭头时我旋转立方体，立方体通常在 X 轴和 Y 轴上正确旋转，但是，当我位于顶部时或底面 我尝试将它向右或向左(绕 Y 轴)旋转，但它没有正确旋转，似乎它是绕 Z 轴旋转的。

顶面的向右箭头 https://i.imgur.com/565nRE0.png "

底面上的左箭头 https://i.imgur.com/n105pcN.png "

我希望立方体无论在什么位置都能正确转动，并想知道是否可以保持旋转轴固定，或者是否有其他替代解决方案。

https://jsfiddle.net/Winplax/cxfe2ko3/10/

我已经调查了这种行为，一切都是因为每次旋转立方体时旋转轴也会这样做，除了 X 轴(向上和向下箭头)，它显然在回转。我试图使用绕 Z 轴的旋转来寻找解决方案，但到目前为止没有任何结果。

我还看到他们使用 matrix3d 属性提供了接近的解决方案，但几乎没有干净的结果和一些失败。我也使用了 css 的 rotate3d 属性，但我没有设法使用该属性正确实现旋转。

(function () {
  var rotateY = 0, rotateX = 0;
  document.onkeydown = function (e) {
  	// left: 37, up: 38, right: 39, down: 40,
    if (e.keyCode === 37) rotateY -= 90;
    else if (e.keyCode === 38) rotateX += 90;
    else if (e.keyCode === 39) rotateY += 90;
    else if (e.keyCode === 40) rotateX -= 90;
    document.querySelector('.cube').style.transform = 'rotateX('+rotateX+'deg)'+'rotateY('+rotateY+'deg)';
  }
})();

body {
	background-image: url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/blackorchid.png);
}

.container {
	position: relative;
	margin: 20px auto;
  margin-top: 50px;
	width: 200px;
	height: 200px;
	perspective: 800px;
}

.cube {
  width: inherit;
  height: inherit;
	-webkit-transition: -webkit-transform .5s linear;
	-moz-transition: -moz-transform .5s linear;
	transition: transform .5s linear;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	-webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.side {
	position: absolute;
	width: inherit;
	height: inherit;
	border: 8px solid black;
	font: normal 50px Arial;
	text-align: center;
	line-height: 200px;
	color: #000000;
}

.front {transform: translateZ(108px); background-color: #A5F84C;}
.back {transform: rotateY(180deg) translateZ(108px); background-color: #8EF8F2;}
.right {transform: rotateY(90deg) translateZ(108px); background-color: #F7AE3C;}
.left {transform: rotateY(-90deg) translateZ(108px); background-color: #F569F7;}
.top {transform: rotateX(90deg) translateZ(108px); background-color: #FBF977;}
.bottom {transform: rotateX(-90deg) translateZ(108px); background-color: #FF5757;}

<div class="container">
  <div class="cube">
    <div class="side front">front</div>
    <div class="side back">back</div>
    <div class="side right">right</div>
    <div class="side left">left</div>
    <div class="side top">top</div>
    <div class="side bottom">bottom</div>
  </div>
</div>

Answer 1

这最终可能会比我之前的建议更容易......与我之前的评论一样，这本身并不是一个答案，但我认为这可能是朝着正确方向迈出的一大步。我只需要将其发布为“答案”即可发布我的代码。

我更新了您的 javascript 以包括 Z 轴控件，使用左和右 (4,6) NumPad 键。代码在这里:

(function () {
  var rotateY = 0, rotateX = 0; rotateZ = 0;
  document.onkeydown = function (e) {
    // left: 37, up: 38, right: 39, down: 40, Numpad4: 100, Numpad6: 102
    if (e.keyCode === 37) rotateY -= 90;
    else if (e.keyCode === 38) rotateX += 90;
    else if (e.keyCode === 39) rotateY += 90;
    else if (e.keyCode === 40) rotateX -= 90;
    else if (e.keyCode === 100) rotateZ += 90; // Numpad 4 - use when on top or bottom
    else if (e.keyCode === 102) rotateZ -= 90; //Numpad 6 - use when on top or bottom
    document.querySelector('.cube').style.transform = 'rotateX('+rotateX+'deg)'+'rotateY('+rotateY+'deg) '+'rotateZ('+rotateZ+'deg)';
  }
})();

看来您是正确的，当您绕 X 轴旋转立方体时，Y 轴和 Z 轴会随之旋转，从而使 Y 轴表现得像 Z 轴，反之亦然。因此我添加了键来控制 Z 轴。当立方体位于顶部或底部时，您可以看到 Z 轴控件的行为与 Y 轴控件在“直立”时的行为一样。

然而，此解决方案的明显问题是，当立方体位于顶部或底部时，它需要单独的键才能正确导航立方体。当立方体的 rotateX === 90 || 时，我尝试了几种形式的“if 语句”和“状态检查器”函数来尝试将左右键“重新映射”到 Z 轴。 rotateX === -90，但我的努力没有结果。也许是因为我累了。也许您的新眼光可以看到我看不到的解决方案。

我希望在某个地方，在我发布的所有内容中，您能找到有用的东西。我会继续努力，如果我找到了什么，我会通知你。但是，如果您在我之前找到了解决方案，我很想知道它是什么样子。

祝你好运