CSS 将 div 旋转 90 度到左边距答案

【问题标题】：CSS rotate div 90 degrees to left marginCSS 将 div 旋转 90 度到左边距
【发布时间】：2015-12-09 09:51:39
【问题描述】：

我有一个包含一个或多个按钮的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);
}

有人可以帮忙吗？

【问题讨论】：

不清楚你在问什么......你能详细说明一下吗？
@RohitKumar - 我有一个简单的条形图，我需要将 id="yaxisbuttons" 的 div 旋转 90 度并沿 Y 轴放置。所以基本上我需要 id="yaxisbuttons" 沿着左边框和垂直中间。
不完全垂直居中，但尝试margin: 50% 0 0 -60px;。或position: absolute; top: 50%; bottom: 50%; margin-left: -60px;
@drjanes 你需要这个吗？ - jsfiddle.net/2v7snxz2/2 垂直居中对齐左边框

标签： javascript html css

【解决方案1】：

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

您可以在下面使用此代码。

#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上的现场演示

【讨论】：

【解决方案2】：

很大程度上取决于您选择的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>

为了这个演示的目的，我添加了一条用于视觉确认定位的参考线。

【讨论】：