Question

I’m using CSS transformation to rotate some elements. However, rotated elements may render partially outside its parent.

Is it possible to avoid this behavior?

To illustrate my thoughts, here is a jsfiddle that highlight this.

There is two divs :

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

and few css rules:

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

}

In fact, the blue rectangle should not render outside the gray rectangle.

Actual:

Expected:

The main idea behind this question, is to add some kind of viewport with interactivity, but never outside the viewport.

Answer 1

Add overflow: hidden; to #g. See this: http://jsfiddle.net/Z5TZ3/5/.

It should look like this:

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

}

That’ll give you: