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的rotation3d属性，但是我没有设法使用该属性正确实现旋转。

(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

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

我使用左右（4,6）NumPad键更新了您的JavaScript，使其包含Z轴控件。代码在这里：

(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轴控件的行为相同。

但是，此解决方案的明显问题在于，当多维数据集位于其顶部或底部时，需要单独的键才能正确导航该多维数据集。我尝试了几种形式的“ if语句”和“状态检查器”功能来尝试在多维数据集rotateX === 90 || rotateX === -90上将左右键“重映射”到Z轴，但是我的努力无济于事。也许是因为我累了。也许您新鲜的眼睛可以看到我无法解决的方法。

我希望在我发布的所有内容中，您都能找到有用的东西。我会继续努力，如果有发现，我会通知您。但是，如果您能找到解决方案，我很想知道它的外观。

祝你好运

使用CSS和JavaScript旋转立方体时保持固定轴

1 个答案: