You are using transform so it changes visual formatting model of an element.
From MDN:
The CSS transform property lets you modify the coordinate space of the
CSS visual formatting model. Using it, elements can be translated,
rotated, scaled, and skewed according to the values set.
A line again from MDN:
By modifying the coordinate space, CSS transforms change the position
and shape of the affected content without disrupting the normal
document flow. This guide provides an introduction to using
transforms.
From W3C : 2 Module Interactions
This module defines a set of CSS properties that affect the visual
rendering of elements to which those properties are applied; these
effects are applied after elements have been sized and positioned
according to the Visual formatting model from [CSS21]. Some
values of these properties result in the creation of a containing
block, and/or the creation of a stacking context.
So you have a parent element with the dimensions below.
width: 1096px;
height: 434px;
Now you are transforming that element using
-webkit-transform: rotate(90deg);
So here, the element transforms visually, but not literally, in other words though you transform an element, it takes the space physically on a document just like a static element takes, it just visually transforms the element. I will share a diagram which will make you understand in a better way..
So though you transformed your element like this, but still the vertical space was taken up because of the height of your transformed element, which did transformed visually, but not literally...
So, now what's the solution? Use position: absolute; on the child element, and anyways you are using position: relative; on the parent.
Demo
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
position: absolute;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
Lets have a test case, I've the styles like below
.parent .transformed {
height: 200px;
width: 200px;
background: #f00;
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
-moz-transform-origin: 300px 300px;
-webkit-transform-origin: 300px 300px;
transform-origin: 300px 300px;
}
.parent .static {
background: #00f;
height: 200px;
width: 200px;
}
Test Case
Here, I am transforming an element having class of .transformed so if you see, the element does transform and am also modifying the origin, but the next box won't move up, as the transformed element take up literal space in the flow, it doesn't get out of the flow like position: absolute; does, but well that's the separate concept.
So you need to use position: absolute; or your div will still take up space vertically and thus you see that scroll bar ...
Poopy IE Compatible Solution
As you commented, well, yes, IE will still show the scroll bar as the element which is positioned absolute still exists in the same dimensions, so what's the workout here?
Firstly, you are transforming the element to set in the parent container, also, you don't need the overflow so the first question is if you don't need overflow than why use auto? You can use hidden.
If not hidden to the parent, and you are looking forward to place some content beneath the transformed element, than better you wrap the transformed element inside another element with the same dimensions set to overflow: hidden; and make sure you move the position: absolute; property to this block. - Demo
If still not happy? Then why transform entire element? transform relevant image only - Demo
