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

问题在于你的前提：

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

实际上，单击某个按钮时，您将旋转设置为-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)";
}

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

2 个答案: