Question

我遇到了一点奇怪。我在页面上有一个立方体，可以通过两种方式旋转：

如果用户在立方体边缘附近徘徊，它将在该方向上“倾斜”，露出立方体的隐藏面。
如果立方体当前“倾斜”并且单击立方体的暴露面，则立方体将旋转，以使该面朝向用户。

// on mouse enter, "tip" the cube to expose the nearest hidden face
$(".overlay").mouseenter(function () {
    var direction = $(this).attr("class").split(" ")[0];
    var tease = getTease(direction);

    $("#cube").css({ transform: 'translateZ(-100px) ' + tease });
    $(".overlay").toggleClass("teasing");

// on mouse leave, reset the cube
}).mouseleave(function () {

    $("#cube").css({ transform: 'translateZ(-100px) rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)' });
    $(".overlay").toggleClass("teasing");
});

// if the user clicks the exposed side of a cube, rotate that side to face them
$(document).on("click", ".overlay.teasing", function () {
    var direction = $(this).attr("class").split(" ")[0];
    var rotate = getRotate(direction);

    $("#cube").css({ transform: 'translateZ(-100px) ' + rotate });
});

如果向左或向右旋转，一切正常。如果围绕X轴旋转立方体（将其旋转或朝向用户旋转），则突然左右两侧的“倾斜”被打破。我想这是我理解的问题。起初我认为答案是，当立方体围绕X轴旋转时，Y轴本身旋转以指向用户。这可以解释为什么立方体现在向错误的方向倾斜：它围绕着指向用户的Y轴倾斜。但是，在进一步的实验中，我注意到X和Y轴之间的这种行为并不一致。也就是说，左/右旋转立方体然后上/下工作正常。向上/向下旋转立方体然后向左/向右旋转被打破。

有谁理解为什么？

这是我的小实验的working fiddle（在webkit和gecko中测试过）。为这场混乱道歉：我试图尽可能地评论它，因为它只是代表我搞乱了几个小时并且不是最漂亮的代码。

注意：我注意到这个问题已经多次以某种方式提出，但我没有找到令人满意的答案。 This question特别充满了有用的信息和教程。我确信我可以实现使用矩阵的解决方案。在我的特定情况下，我感兴趣的是为什么立方体可以左/右然后上/下工作，但不是另一种方式。

旋转轴似乎变化不一致。

0 个答案: