Question

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.

Answer 1

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