webkit-transform-origin을 설정하여 가장자리에 3D 입방체를 배치하는 방법은 무엇입니까?

나는 CSS3 관점 & 변환으로 주변에서 놀고있다. this great 3D cube example에서 시작하여 큐브를 수정하여 중심을 중심으로 회전하지 않고 가장자리를 굴립니다.webkit-transform-origin을 설정하여 가장자리에 3D 입방체를 배치하는 방법은 무엇입니까?

-webkit-transform-origin: bottom left (see fiddle; 예제는 단순화를 위해 왼쪽 틸트로 제한됨)으로 z 축을 중심으로 큐브를 회전하여 첫 번째 왼쪽 기울기를 얻었습니다. 계속되는 왼쪽 기울이기 때문에 나는 원점을 더 조정하는 방법에 어려움을 겪고 있습니다. 개념적으로 부모 컨테이너를 기준으로 원점을 설정해야합니다 (예 : 연속적인 왼쪽 기울이기의 경우 200px 간격으로 점차 왼쪽으로 이동해야 함).

도움을 주시면 대단히 감사하겠습니다.

출처

2012-11-08 netzwerg

나는 이것에 가봤 다. 그리고 나는 당신이 정확하게 당신이 원하는 것을 얻을 수있는 CSS matrix transformations을 볼 필요가있을 것이라고 생각한다.

불행히도 회전하는 것만 큼 간단하지 않습니다. 변환 원점을 이동하십시오. 큐브가 그 가장자리를 중심으로 회전하지만, 변환 지점을 이동하면이 새로운 원점을 사용하여 이전 변환이 큐브에 적용됩니다.

또한 입방체의 위치를 변환해야합니다. 회전을 사용하여 순전히 그것을 이동할 수 없습니다. 행렬은 내가 생각하기에이 모든 것을 해결해야한다. (나는 두려워한다.)

큐브가 회전되고 변환 된 곳에서 내가 만든 수정 된 jsfiddle를 볼 수있다. 번역 지점이 중심이지만 큐브가 "구르는"것처럼 보이지는 않습니다.

... 

//left 
zAngle -= 90; 
xPos -= 50; 
//rotate and translate the position of the cube 
$('#cube')[0].style["WebkitTransform"]="translateX("+xPos+"px) rotateZ("+zAngle+"deg)"; 

...

JS 여기 바이올린 : http://jsfiddle.net/DigitalBiscuits/evYYm/20/

희망이 당신을 도와줍니다 여기에 중요한 추가 코드입니다!

출처

2012-11-16 22:38:46

한 -하지만 난 ;-) 실제 솔루션을 찾고 있어요 – netzwerg