css - CSS 変換を使用する場合、要素が親をオーバーフローしないようにするにはどうすればよいですか?

Question

一部の要素を回転させるために CSS 変換を使用しています。ただし、回転された要素は、その親の外側で部分的にレンダリングされる場合があります。

この動作を回避することは可能ですか?

私の考えを説明するために、これを強調するjsfiddleを次に示します。

2 つの 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;

}

それはあなたに与えるでしょう：