当使用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; 

} 

这会给你：