Question

我用html / css创建了一个多维数据集。

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

然而，第二次，立方体类型＃34;出现＆＃34;然后＆＃34;后退＆＃34;旋转时。立方体最终处于相同的位置，但过渡是不同的。

#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中有固定的宽度，但填充增加了外部宽度。检查它们是否与检查元素的宽度相同。尝试解决盒子大小问题。

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

1 个答案: