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

制作了一个三维立方体。单击按钮时，它会向左或向右旋转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)";
}

全文如下：

我到处找过了。有这样的例子：

---

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

问题在于你的前提：

单击按钮时，它会向左或向右旋转50度

实际上，单击按钮时，您正在将旋转设置为精确的

-50deg

或

50deg

。这是一个绝对赋值，不是增量

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

大概是这样的：

---

LcSalazar在处理立方体的旋转状态方面是正确的，但我的印象是，您也对旋转动画感兴趣？如果是这样的话，你会想去处理那些州与州之间的问题。介绍CSS关键帧动画中的动态值，这可能有点超出了您当前对CSS/JS的了解，但是花一些时间来了解它，您会惊奇地发现它开始变得有意义

---

祝你好运

谢谢！。这解决了我的问题，并给了我一些新的信息使用！谢谢你提供的CSS链接，@Samuel。我去看看！

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