CSS将div旋转90度到左边距

Question

我有一个div包含一个或多个按钮.它可以旋转90度.但是我需要旋转div以沿左边距(Y轴)放置并垂直对齐到Y轴的中间.

我开始尝试小提琴 - http://jsfiddle.net/5rnm577a/

代码如下:

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

有人可以帮忙吗？

Answer 1

很大程度上取决于你选择什么作为transform-origin重点.

除旋转外,您还必须根据需要上/下/左/右平移元素.

要将元素放置在页面的50%(？),你将需要使用,嗯,定位...我absolute在这里使用但fixed也可以工作.

* {
  -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>

为了演示的目的,我添加了一个参考线,用于视觉确认定位.

Answer 2

你能通过画图来解释更多吗？

您可以使用下面的代码。

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

jsfiddle上的现场演示