javascript - 如何使用 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 的了解，但花一些时间了解它，您会惊讶于它开始变得有意义的速度有多快。

祝你好运!