如何使用 Javascript 或 Jquery 正确旋转这个立方体？

Question

制作了一个 3d 立方体。单击按钮时，它会向左或向右旋转 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/

但我是编程新手（我在空闲时间玩了 2 个月的 JavaScript）并且不太了解。我以为我可以很容易地完成我的目标，但我被卡住了。我不想使用任何插件。只是想学习自己真正编程。任何帮助，将不胜感激。

Answer 1

LcSalazar 在处理多维数据集的旋转状态方面是正确的，但我的印象是您也对旋转动画感兴趣？如果是这样，您需要查看CSS animations 来处理这些中间状态。 This question 涵盖了 CSS 关键帧动画中的动态值，这可能有点超出您目前对 CSS/JS 的了解，但花一些时间了解它，您会惊讶于它开始变得有意义的速度。

祝你好运！

Answer 2

问题在于你的前提：

“当一个按钮被点击时，它会向左或向右旋转 50 度”

实际上，当单击按钮时，您正在将旋转设置为恰好-50deg 或50deg。这是一个绝对的分配，而不是一个增量。

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

类似这样的：

See working example

//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)";
}