Drehen eines Würfels um seine Mitte Y-Achse, funktioniert erstmals

Question

Ich habe einen Würfel mit HTML/CSS gemacht.

Wenn ich zum ersten Mal eine Rotationstransformation anwende, rotiert der Würfel sehr schön um seine Y-Mittelachse.

Beim zweiten Mal "kommt" die Würfelart "vorwärts" und "bewegt sich dann zurück", während sie sich dreht. Der Würfel landet in derselben Position, aber der Übergang ist anders.

#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); 
     } 

Bit von Javascript Würfel in eine gute Sicht zu bewegen

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

JavaScript Nehmen Rotation

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

Ich glaube, Sie unterschiedliche Breite auf Ihrem Würfel haben Paneele !! Sie haben eine feste Breite in CSS, aber Polster erhöhen die äußere Breite. überprüfen Sie, ob sie alle die gleiche Breite mit Ihrem Inspect-Element haben. Versuchen Sie, das Box-Sizing zu umgehen.