當使用CSS轉換時，如何避免元素溢出其父項？

Question

我正在使用CSS轉換來旋轉一些元素。但是，旋轉的元素可能會在其父代之外部分渲染。

可以避免這種行爲嗎？

爲了說明我的想法，here is a jsfiddle突出這一點。

有兩個div：

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

和幾個CSS規則：

#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; 

} 

這會給你：