Javascript 围绕立方体的中心Y轴旋转立方体，第一次起作用

我用html/css制作了一个立方体

第一次应用旋转变换时，立方体围绕其中心Y轴在适当位置旋转得非常好

然而，第二次，立方体在旋转时“向前移动”，然后“向后移动”。立方体最终位于相同的位置，但过渡不同

一点Javascript，将多维数据集移动到一个良好的视图中

$("#cube").css("transform", "translateZ(-2500px) translateX(-380px)");

JavaScript应用旋转

if (direction == "left") {
        if (face == 1) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateX(2500px) translateZ(-380px)");
            face++;
        }
        else if (face == 2) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateZ(2500px)  translateX(380px)  ");              
            face++;
        }
        else if (face == 3) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateX(-2500px) translateZ(380px) ");
            face++;
        }
        else if (face == 4) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateZ(-2500px) translateX(-380px) ");

            face = 1;
        }
    }

---

我想你的立方体面板有不同的宽度！！css中的宽度是固定的，但填充会增加外部宽度。

---

检查它们是否与检查元件具有相同的宽度。尝试调整盒子大小

谢谢你的建议。我检查了所有的面，它们都是相同的宽度、高度、填充等。而且，如果我一直旋转，或者先向左再向右旋转，“向前移动”的故障有时也会发生在第一个面上。如果你的代码在线或在小提琴上，那会更好，所以我可以检查它。

if (direction == "left") {
        if (face == 1) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateX(2500px) translateZ(-380px)");
            face++;
        }
        else if (face == 2) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateZ(2500px)  translateX(380px)  ");              
            face++;
        }
        else if (face == 3) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateX(-2500px) translateZ(380px) ");
            face++;
        }
        else if (face == 4) {

            angle = angle + 90;
            $("#cube").css("transform", "rotateY(" + angle + "deg) translateZ(-2500px) translateX(-380px) ");

            face = 1;
        }
    }