패딩 또는 여백없이 회전 된 요소가 측면에 붙어 있지 않습니다.

Question

저는 컨테이너 내부를 회전하는 div을 가지고 있습니다. 회전 된 div을 컨테이너의 가장 왼쪽에 "부착"할 수 없었습니다. 내 말은 this fiddle을 참조하십시오.

Answer 1

당신은 top left에 transform-origin (-webkit-transform-origin 등)을 설정하고 (: transform: rotate(-90deg) translateX(-100px) 그래서이 같은) rotiation 후 translateX(-100px)를 추가해야합니다. 그렇지 않으면 중심점을 중심으로 회전합니다 (회전 된 요소의 배경을 설정하면 나타납니다).

사이드 노트는 필터가 IE9에 적용되지 않았는지 확인합니다 (조건부 주석 사용). 그렇지 않으면 둘 다 적용되고 결과는 블랙 박스이기 때문입니다.

Updated fiddle