CSS 큐브, 그리드에 맞추기 어려움

Question

제 목표는 그리드에 이러한 큐브를 놓고 라인 업, 드래그 가능 및 스냅 할 수있게하는 것입니다. this example을 기반으로 잘 작동하는 큐브를 얻었지만 일부 메커니즘을 완전히 이해하지 못하고 일부 문제가 있습니다.

1. 큐브가 회전 한 후 시작됩니다. 이것을 보시려면, 아직 정면에있는 동안 "show-front"클래스를 적용하는 "1"을 클릭하십시오. 그것은 즉시 줄어들 것이다. 고정

2. 큐브 축이 가운데에 있지 않으므로 회전 할 때 다른 xy 좌표로 끝납니다.

3. CSS에서는 크기를 200x200 (또는 임의의 요소 25)로 설정하지만 Z 변환으로 인해 정확하게는 아닙니다. 이 부분은 대부분 수정되었습니다. 하단의 업데이트를 참조하십시오.

어떻게 세 가지 문제를 해결할 수 있습니까? 사람이되어야합니다 별도의 질문 같은 느낌 경우

.itemView { 
     width: 200px; 
     height: 200px; 
     /*position: relative;*/ 
     /*margin: 0 auto 40px;*/ 
     /*border: 1px solid #CCC;*/ 
     -webkit-perspective: 1000px; 
     -moz-perspective: 1000px; 
      -o-perspective: 1000px; 
       perspective: 1000px; 
     -webkit-margin-start: 0 !important; 
     -webkit-margin-before: 0 !important; 
     -webkit-margin-end: 0 !important; 
     -webkit-margin-after: 0 !important; 
    } 

    .cube { 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     -webkit-transform-style: preserve-3d; 
     -moz-transform-style: preserve-3d; 
      -o-transform-style: preserve-3d; 
       transform-style: preserve-3d; 
     -webkit-transition: -webkit-transform 1s; 
     -moz-transition: -moz-transform 1s; 
      -o-transition: -o-transform 1s; 
       transition: transform 1s; 
    } 

    .cube figure { 
     display: block; 
     position: absolute; 
     width: 196px; 
     height: 196px; 
     border: 2px solid black; 
     color: white; 
    } 

    .cube.panels-backface-invisible figure { 
     -webkit-backface-visibility: hidden; 
     -moz-backface-visibility: hidden; 
      -o-backface-visibility: hidden; 
       backface-visibility: hidden; 
    } 

    .cube .front {  
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .back { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .right { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .left { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 
    .cube .top { 
     background-color: cornflowerblue; 
     border: 1px solid #ccc; 
    } 
    .cube .bottom { 
     background-color: #555; 
     border: 1px solid #ccc; 
    } 

    .cube .front { 
     -webkit-transform: translateZ(99px); 
    } 
    .cube .back { 
     -webkit-transform: rotateX(-180deg) translateZ(99px); 
    } 
    .cube .right { 
     -webkit-transform: rotateY( 90deg) translateZ(99px); 
    } 
    .cube .left { 
     -webkit-transform: rotateY( -90deg) translateZ(99px); 
    } 
    .cube .top { 
     -webkit-transform: rotateX( 90deg) translateZ(99px); 
    } 
    .cube .bottom { 
     -webkit-transform: rotateX( -90deg) translateZ(99px); 
    } 

    .cube.show-front { 
     -webkit-transform: translateZ(-99px); 
    } 
    .cube.show-back { 
     -webkit-transform: translateZ(-99px) rotateX(-180deg); 
    } 
    .cube.show-right { 
     -webkit-transform: translateZ(-99px) rotateY( -90deg); 
    } 
    .cube.show-left { 
     -webkit-transform: translateZ(-99px) rotateY( 90deg); 
    } 
    .cube.show-top { 
     -webkit-transform: translateZ(-99px) rotateX( -90deg); 
    } 
    .cube.show-bottom { 
     -webkit-transform: translateZ(-99px) rotateX( 90deg); 
    } 

.itemHandle { 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    right: 0px; 
    cursor: move; 
    white-space: nowrap; 
    background-color: cornflowerblue; 
    text-align: left; 
    /*border-top-right-radius: 15px;*/ 
} 

또한, 그 괜찮아요 : 여기

http://jsfiddle.net/scottbeeson/phJpS/가 중요한 부분 인 CSS입니다 : 여기

는 바이올린입니다. 나는 그들이 그들 모두가 똑같은 "문제"에 속한다는 것을 알았고 똑같은 바이올린을 3 번 올리는 것보다 쉬울 것입니다. # 1

업데이트 # 3 (updated fiddle)

나는 기본적으로에 큐브의 전면을 0으로 정면의 transformZ을 변경하고 변환의 나머지 부분을 조정 할 수 있었다 "workArea"와 같은 비행기. 이것은 훨씬 나아졌지만 마치 큐브를 향하여 머리를 들여다 보지 않고있는 것처럼 약간의 시각을 제공합니다. 얼굴이 반투명하지 않으면 눈에 띄지 않습니다. 업데이트 된 CSS는 다음과 같습니다.

.cube .front { 
    -webkit-transform: translateZ(0px); 
} 
.cube .back { 
    -webkit-transform: rotateX(-180deg) translateZ(200px); 
} 
.cube .right { 
    -webkit-transform: rotateY( 90deg) translateZ(100px) translateX(100px); 
} 
.cube .left { 
    -webkit-transform: rotateY( -90deg) translateZ(100px) translateX(-100px); 
} 
.cube .top { 
    -webkit-transform: rotateX( 90deg) translateZ(100px) translateY(-100px); 
} 
.cube .bottom { 
    -webkit-transform: rotateX( -90deg) translateZ(100px) translateY(100px); 
} 

Answer 1

여백과 안쪽 여백 때문에 숫자가 표시되지 않습니다.

시도 :

.cube figure { 
    display: block; 
    position: absolute; 
    width: 200px; 
    height: 200px; 
    border: 0px solid black; 
    color: white; 
    margin: 0px; 
    padding: 0px; 
    } 

추가 마진과 패딩 = 지금 전체 좌표 시스템을 변경 한 demo

0. 큐브 중심을 0 0 좌표로 만들면 더 쉽습니다. 이제 회전하는 모든 것들은 회전 만하면되고, 알아내는 것이 훨씬 쉽습니다.

정면이 z = 0 평면에있는 경우, 기본 레벨에서 전역 오프셋을 설정하십시오.