중심 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); 
     } 

비트는

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

자바 스크립트는 당신이 당신의 큐브에 다른 폭을 가지고 있다고 생각 회전

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에서 너비가 고정되어 있지만 패딩은 바깥 쪽 너비를 증가시킵니다. 귀하의 inspect 요소가 모두 동일한 너비인지 확인하십시오. 상자 크기 조정을 시도하십시오.