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

上的现场演示

CSS将div旋转90度到左边距

2 个答案: