Turn a DIV on side using CSS3 transformation

css, css-transforms, rotatetransform, rotation

Solution

I've updated your fiddle. Hope it'll work.

Problem

I have a menu that has to appear on side rotated -90 degrees as depicted below. NOTE: the DIV has a dynamic width so we can not rotate it and then shift it to left or top using `top:-XX`. ``` #rotateme { -webkit-transform: rotate(-90deg); -webkit-transform-origin: 0 0; position: absolute; top: 250px; /*not going to work with dynamic width */ left: 0px; } ``` I tried alot using CSS3 transformation and transformation-origin but no combination could get me there. I have created a fiddle here (http://jsfiddle.net/P2UQy/8/) that creates the content of the div randomly (dynamic width). This fiddle also includes a failure attempt to rotate using CSS3 transform. Can anyone get it work like shown in the picture above? Feel free to add more containers/wrappers if needed.

Original source