如何使用Javascript或Jquery正确旋转此多维数据集

Question

制作了一个三维立方体。单击按钮时，它会向左或向右旋转50度。当我单击同一按钮时，我希望它再旋转50度。我该如何做到这一点？这是我现在的代码：

//code to rotate cube
var rotateCube = document.getElementById('cube');
var moveLeft = document.getElementById('button-one');
var moveRight = document.getElementById('button-two');

moveLeft.onclick = function() {
    rotateCube.style.webkitTransform = "rotateY(-50deg)";
}
moveRight.onclick = function() {
    rotateCube.style.webkitTransform = "rotateY(50deg)";
}

全文如下：http://jsfiddle.net/camlatimer/6xp2dwe7/1/

我到处找过了。有这样的例子：http://paulrhayes.com/experiments/cube-3d/

但我是编程新手（在空闲时间摆弄javascript两个月），不太懂。我以为我可以很容易地完成我的目标，但我被卡住了。我不想使用任何插件。我只想学会自己编程。如有任何帮助，我们将不胜感激。

Answer 1

LcSalazar在处理立方体的旋转状态方面是正确的，但我的印象是，您也对设置旋转动画感兴趣？如果是这样的话，您将需要查看CSS动画来处理那些处于状态之间的动画。这个问题涵盖了CSS键框动画中的动态值，这可能有点超出了你目前对CSS/JS的了解，但花点时间研究一下，你会惊讶于它开始变得有意义的速度有多快。

祝你好运！

Answer 2

问题出在您的前提上：

"点击按钮时，向左或向右旋转50度"

实际上，单击按钮时，您将旋转设置为-50deg或50deg。这是一个绝对的任务，而不是增量。

为了增加（因为旋转属性是由文本组成的值指定的），您需要以可以控制的方式存储该值。例如，将其存储在外部变量中，并使用它来增加最终值。

类似这样的东西：

参见工作示例

//Here's where you will store the actual value
var rotationValue = 0;
moveLeft.onclick = function() {
    rotationValue -= 50;
    rotateCube.style.webkitTransform = "rotateY("+ rotationValue +"deg)";
}
moveRight.onclick = function() {
    rotationValue += 50;
    rotateCube.style.webkitTransform = "rotateY("+ rotationValue +"deg)";
}