1
CSS에 3 개의 작은 큐브를 만들고 CSS 파일의 맨 아래에있는 div #first_line_of_cubes 내의 줄에 그룹화했습니다. 당신은 여기에서 볼 수 있습니다 http://jsfiddle.net/ZVVK3/ (모든 neccesary 접두사가 아니기 때문에 나는이 크롬에서만 작동합니다 생각)그룹의 중심에서 3D CSS 객체 그룹을 회전하십시오.
가 지금은 라인 #first_line_of_cubes을 회전 할 사용하여 :
-webkit-transform:rotateY() rotate(x)
문제는 ir가 그룹화 된 큐브의 왼쪽 모서리를 중심으로 회전하지만 그룹화 된 큐브의 중심을 중심으로 회전 시키길 원한다는 것입니다.
지금까지 구글은 그 해결책이 -webkit-transform-origin 속성 이었지만 나는 시도한 어떤 값으로도 어떤 효과도 얻을 수 없다고 말했다. 무엇이 문제이며 어떻게 그 중심을 중심으로 회전시킬 수 있습니까?
CSS 솔루션이 없으면 JavaScript/jQuery도 좋습니다. 나를 위해
http://jsfiddle.net/MRpUb/는 좀 더 깊은했다 조사. 1.) #second_line_of_cubes 아래에 다른 줄의 큐브를 만들었습니다. 2) -webkit-perspective : 1000px를 해제 했으므로 Y에서만 회전이 Y에서만 가능합니다 (X가 아님). 3) #first_line_of_cubes 바로 아래 #second_line_of_cubes 위치 4) #first_line_of_cubes를 0도 및 #second_line_of_cubes를 180도 회전 시켰습니다. 이제 회전 점이 일치하지 않기 때문에 회전 점이 중앙에 있지 않음을 분명히 알 수 있습니다. 그러나 변환 원점이 "340px 0px 0px"로 설정된 경우 완벽하게 일치합니다. 내가 말하는 내용은 다음과 같습니다. http://jsfiddle.net/VpFjt/ – user2487089
그래서 질문이 남아 있습니다. 추가 40px는 어디에서 왔습니까? Logicly 300px의 값은 600px wide line_of_cubes의 중심을 나타냅니다. – user2487089
translateZ (XXpx)에서 온 것으로 믿습니다; z 번역을 정정하지 않으면 회전 할 때 앞면으로 가져올 때 뒷면이 더 커지기 때문입니다. 그것은 유일한 것만은 아니지만 그 영향을 일으키는 원인의 일부일 수 있습니다. – Eolis