围绕其中心 Y 轴旋转立方体，第一次工作

Question

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

我第一次应用旋转变换时，立方体围绕其中心 Y 轴旋转得非常好。

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

#wrapper {
    -webkit-perspective: 1100px;
    -webkit-perspective-origin: 50% 300px;
    perspective: 1100px;
    perspective-origin: 50% 300px;
    margin-top: 25px;
}

#cube {
    position: relative;
    margin: 0 auto;
    height: 1150px;
    width: 1150px;
    -webkit-transform-style: preserve-3d;
    -webkit-transition: all 2s ease;
    transform-style: preserve-3d;
    transition: all 2s ease;
    transform: translateZ(-100000px);
}

.face {
    position: absolute;
    height: 1140px;
    width: 1140px;
    padding: 20px;
    background-color: white;
    border: solid 1px black;
}


 #cube .one {        
            transform: translateZ(600px);
        }

        #cube .two {              
            transform: rotateY(90deg) translateZ(600px);
        }

        #cube .three {         
            transform: rotateY(180deg) translateZ(600px);
        }

        #cube .four {       
            transform: rotateY(-90deg) translateZ(600px);
        }

        #cube .five {           
            transform: rotateX(-90deg) translateZ(600px) rotate(180deg);
        }

        #cube .six {       
            transform: rotateX(90deg) translateZ(600px);
        }

一点点 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;
        }
    }

Answer 1

我认为你的立方体面板上有不同的宽度！！您在 css 中有固定宽度，但填充会增加外部宽度。 检查它们是否与您的检查元素具有相同的宽度。尝试解决盒子大小问题。