CSS rotate div 90 degrees to left margin

Question

I have a div that contains one or more buttons. It can be rotated 90 degrees. But I need the rotated div to place along left margin (Y-Axis) and vertically aligned to middle of Y-Axis.

I started trying a fiddle - http://jsfiddle.net/5rnm577a/

The code is given below:

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);
}

Can someone please help?

Answer 1

A lot depends on what you select as the transform-origin point.

In addition to the rotation you have to translate the element up/down/left/right as required.

To position the element 50% down the page(?) you will need to use, erm, positioning...I used absolute here but fixed would work just as well.

* {
  -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 red;
}

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

I added a reference line for visual confirmation of the positioning for the purposes of this demo.

Answer 2

Can you explain more by drawing image?

You can use this code below.

#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*/
}

Live Demo on jsfiddle