css - 使用 CSS 转换时，如何避免元素溢出其父级？

Question

我正在使用 CSS 转换来旋转一些元素。但是，旋转的元素可能会部分呈现在其父元素之外。

是否可以避免这种行为？

为了说明我的想法，这是一个突出这一点的 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;

}

这会给你：