javascript CSS将div旋转90度到左边距
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32547116/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS rotate div 90 degrees to left margin
提问by dr janes
I have a divthat contains one or more buttons. It can be rotated 90 degrees. But I need the rotated divto place along left margin (Y-Axis) and vertically aligned to middle of Y-Axis.
我有一个div包含一个或多个按钮的。它可以旋转 90 度。但我需要旋转div以沿左边距（Y 轴）放置并垂直对齐到 Y 轴的中间。
I started trying a fiddle - http://jsfiddle.net/5rnm577a/
我开始尝试小提琴 - http://jsfiddle.net/5rnm577a/
The code is given below:
代码如下：
HTML:
HTML：
<div>
<div id="yaxisbuttons">
<p>Y Button 1</p>
<p>Y Button 2</p>
</div>
</div>
CSS:
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?
有人可以帮忙吗？
回答by Paulie_D
A lot depends on what you select as the transform-originpoint.
很大程度上取决于您选择什么作为transform-origin重点。
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 absolutehere but fixedwould work just as well.
要将元素定位在页面下方 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>I added a reference line for visual confirmation of the positioning for the purposes of this demo.
出于本演示的目的，我添加了一条参考线，用于视觉确认定位。
回答by Sarower Jahan
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
jsfiddle 上的现场演示
