title: Overflow behavior after using CSS3 transform
body: <p>Please check the <a href="http://jsfiddle.net/armanbari/aRQR4/embedded/result/"><strong>demo</strong></a></p>
  
  <p>I have two <code>div</code>s the first <code>div</code> is used for showing the scroll-bar and the second <code>div</code> is used for the rotation of inner contents of the <code>div</code>.</p>
  
  <p>My question is why scroll-bar is showing even if there is no overflow of the inner contents.</p>
  
  <p>Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555"&gt;
      &lt;div id="RotationDiv"&gt;
          &lt;img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#RotationDiv {
      -ms-transform-origin: 539px 539px;
      -webkit-transform-origin: 539px 539px;
      width: 434px;
      height: 1096px;
      overflow: visible;
      -ms-transform: rotate(90deg);
      -webkit-transform: rotate(90deg);
      background-color:Red;
  }
  </code></pre>