CSS rota div 90 grados al margen izquierdo

Tengo un div que contiene uno o más botones. Se puede girar 90 grados. Pero necesito que el div rotado se coloque a lo largo del margen izquierdo (eje Y) y verticalmente alineado al centro del eje Y.

Empecé a probar un violín – http://jsfiddle.net/5rnm577a/

El código se da a continuación:

HTML:

 <div> <div id="yaxisbuttons"> <p>Y Button 1</p> <p>Y Button 2</p> </div> </div> 

CSS:

 #yaxisbuttons { padding:0px 0px 0px 0px; text-align: center; margin:0px; width: 160px; height:40px; background:#FF931E; z-index:15; border-radius: 5px 5px 5px 5px; -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); } 

¿Puede ayudarme alguien, por favor?

Mucho depende de lo que select como punto de transform-origin la transform-origin .

Además de la rotation, debe traducir el elemento hacia arriba / abajo / izquierda / derecha según sea necesario.

Para colocar el elemento al 50% en la página (?) Necesitará usar, erm, posicionamiento … Utilicé absolute aquí pero fixed funcionaría igual de bien.

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; height: 300px; width: 300px; } #yaxisbuttons { position: absolute; top: 50%; padding: 0 5px; text-align: center; background: #FF931E; border-radius: 5px; transform-origin: center top; transform: translateX(-50%) rotate(-90deg); } #yaxisbuttons p { color: #fff; line-height: 20px; display: inline-block; } .line { position: absolute; top: 50%; width: 100%; height: 1px; border-bottom: 1px solid networking; } 
 <div id="yaxisbuttons"> <p>Y Button 1</p> <p>Y Button 2</p> </div> <div class="line"></div> 

¿Puedes explicar más dibujando la image?

Puedes usar este código a continuación.

 #yaxisbuttons { padding: 0px 0px 0px 0px; text-align: center; margin: 180px 0 0 0px;/*Changed*/ width: 160px; height: 40px; background: #FF931E; z-index: 15; border-radius: 5px 5px 5px 5px; -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); transform-origin: left top;/*New Added*/ } 

Demostración en vivo en jsfiddle