scalex - Convierta un DIV en un lado usando la transformación CSS3

scaley css

Question

Tengo un menú que tiene que aparecer en el lado girado -90 grados como se muestra a continuación.

NOTA: el DIV tiene un ancho dinámico, por lo que no podemos rotarlo y luego top:-XX a la izquierda o a la parte superior con la 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; 
}

Traté mucho de usar la transformación CSS3 y el origen de la transformación, pero ninguna combinación podría llevarme allí.

He creado un violín aquí ( http://jsfiddle.net/P2UQy/8/ ) que crea el contenido del div aleatoriamente (ancho dinámico). Este violín también incluye un intento de falla para rotar usando la transformación CSS3.

¿Alguien puede hacer que funcione como se muestra en la imagen de arriba? Siéntase libre de agregar más contenedores / envolturas si es necesario.

Answer 1

He actualizado tu violín . Espero que funcione