CSS를 변환 행렬로 회전 한 후 CSS를 배치하는 CSS

Question

div를 회전시키기 위해 CSS 변환 행렬을 사용하고 있습니다. 회전이 적용된 후에 CSS 'left'와 'top'을 사용하여 div의 위치를 ​​지정하려고합니다.

문제는 CSS 위치 지정이 회전을 무시하고 회전하지 않는 것처럼 처리한다는 것입니다. 예를 들어, 사각형을 90도 회전 한 다음 왼쪽 0px 및 위쪽 0px로 설정하면 컨테이너의 왼쪽 위 모서리에 나타나지 않습니다. 원래의 사각형을 0,0에 배치하고 회전 만하면 (결과는 10px, -5px 정도 인 것처럼 보입니다) 동일한 결과가됩니다.

모든 답변 온라인 회전 된 사각형의 위치를 ​​얻는 것에 대해서만 이야기하지만 설정은 아닙니다.

감사합니다.

Answer 1

회전 후에 div를 배치 할 방법이 없습니다.

정말로 할 수있는 부분을 배치하고이 위치를 회전 중심으로 설정하십시오.

구체적인 예를 들어 주시면보다 자세한 답변을 드릴 수 있습니다. 대신

newX = x - (originalWidth - boundedW)/2; 
newY = y - (originalHeight - boundedH)/2; 

Answer 2

는 결국 I 간단한 논리를 해결했다.