CSS 변환을 사용할 때 요소가 부모를 오버플로하지 않도록하는 방법은 무엇입니까?

Question

CSS 변환을 사용하여 일부 요소를 회전 시켰습니다. 그러나 회전 된 요소는 부분적으로 부모 외부로 렌더링 될 수 있습니다.

이 동작을 피할 수 있습니까?

내 생각을 설명하기 위해 이것을 강조 표시 한 here is a jsfiddle.

<div id="g"> 
    <div id="inner"></div> 
</div> 

거의 CSS 규칙 :

두 개의 div가이 사실

#g { 
    background:silver; 
    width:400px; 
    height:400px; 
    margin:100px 100px 100px 100px; 
    border:solid 6px green 
} 
#inner { 
    background:blue; 
    width:100px; 
    height:100px; 
    transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0; 

} 

, 파란색 사각형은 회색 사각형 외부 렌더링해서는 안된다. 실제

: 예상

:이 질문 뒤에

주요 아이디어는, 그러나 결코 뷰포트 외부 상호 작용으로 뷰포트의 어떤 종류를 추가하는 것입니다.

Answer 1

overflow: hidden;에서 #g까지를 더합니다. 이것을보십시오 : http://jsfiddle.net/Z5TZ3/5/.

그것은 다음과 같아야합니다

#g { 
    background:silver; 
    width:400px; 
    height:400px; 
    margin:100px 100px 100px 100px; 
    border:solid 6px green; 
    overflow: hidden; 
} 
#inner { 
    background:blue; 
    width:100px; 
    height:100px; 
    transform:rotate(45deg); 
    -webkit-transform:rotate(45deg); 
    -webkit-transform-origin: 0 0; 
    transform-origin: 0 0; 

} 

그것은 당신에게주지 :