Space while rotation Div In css - css

Question

I want one div in my page whose position will be fixed rotation is 30 degree but when I am doing this its shows like this
I Don't want that empty space in the top while rotation. I want Top same as bottom currently in top its showing some space when i rotate my div.
CSS is
#beta{
position:fixed;
bottom:0;
padding:-30px;
z-index: 1;
width: 15em;
height:3em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
}

Answer 1

You can add transform-orign, which will act as rotating axis.
And if you want this to be at top then add top and remove bottom value and while rotating, the blocks shifts so give left value to the half of its height of appropriate value.
#beta{
position:fixed;
top:0;
z-index: 1;
width: 15em;
height:3em;
left: 1.5em;
background: #65a9d7;
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Chrome, Safari, Opera */
transform: rotate(30deg);
transform-origin: left top;
}
And one more thing, padding doesn't work with negative value. :)
Have a nice code day.

Answer 2

Take a look at the transform-origin CSS property if you want to set the point at which the object rotates around. In your specific example, the reason there is so much space above is because you've set bottom: 0, which will force a fixed element to snap to the bottom of its parent.
I'm not sure the exact layout you're looking for, but here is something with less white space at the top:
#beta {
position: fixed;
z-index: 1;
width: 15em;
height: 3em;
background: #65a9d7;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
margin-top: 4em;
}
<div id="beta">
Beta Version
</div>
Edit: The following snippet is a follow-up to a comment from the original poster.
.container {
border: 5px solid #000;
height: 5em;
overflow: hidden;
position: relative;
width: 15em;
}
.beta {
background: #65a9d7;
height: 3em;
line-height: 3em;
margin-top: -1.5em;
position: absolute;
text-align: center;
top: 50%;
width: 15em;
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Chrome, Safari, Opera */
transform: rotate(30deg);
}
<div class="container">
<div class="beta">
Beta Version
</div>
</div>