我有一个包含一个或多个按钮的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);
}
有人可以帮忙吗？
解决方法
很大程度上取决于您选择的变换原点.
除旋转外,您还必须根据需要上/下/左/右平移元素.
要将元素向下放置50％(？),你需要使用,嗯,定位…我在这里使用绝对但是固定也可以正常工作.
* {
-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>
为了演示的目的,我添加了一个参考线,用于视觉确认定位.