Html 90 度旋转文本，使用 CSS 与页面右上角齐平
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18392503/
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
90 degrees rotated text, flush to page top-right with CSS
提问by Dan
I know how to rotate text 90 degrees using CSS, but I'm trying to align the text to the top-right of the page (or a parent element) as its 90-degree-rotated self. Is this possible?
我知道如何使用 CSS 将文本旋转 90 度，但我试图将文本与页面（或父元素）的右上角对齐，作为其旋转 90 度的自我。这可能吗？
Example:
例子：
回答by meub
Neither of the previous solutions work for any amount of text. You need to use transform-origin.
之前的解决方案都不适用于任何数量的文本。您需要使用转换原点。
<div class="container">
<span class="rotate">Hello THERE!</span>
</div>
.rotate {
-webkit-transform: rotate(90deg);
-webkit-transform-origin: left top;
-moz-transform: rotate(90deg);
-moz-transform-origin: left top;
-ms-transform: rotate(90deg);
-ms-transform-origin: left top;
-o-transform: rotate(90deg);
-o-transform-origin: left top;
transform: rotate(90deg);
transform-origin: left top;
position: absolute;
top: 0;
left: 100%;
white-space: nowrap;
font-size: 48px;
}
回答by henk.io
My first time answering something very new to this but here is the code:
我第一次回答一些非常新的问题，但这里是代码：
<div id="block">
<p id="rotate">Hello!!!</p>
</div>
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:absolute;
}
#rotate {
position:relative;/* place the text relateve to whatever tag is devined as absolute */
left:130px;/* change these dimensions - can use left or right */
top:20px;/* change these dimensions can use top or bottom*/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
回答by Mohammed Hamz?
The solution is simple,add the rotation in text and position absolute.
解决方法很简单，在文本和绝对位置添加旋转。
<style>
#block{
width:500px;
height:500px;
display:block;
margin:auto;
border: 1px solid #000;
position:relative;
}
#text {
padding:0;
margin:0;
position:absolute;
right:0;
font-size:30px;
top:40px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
</style>
<div id="container">
<p id="text">Hello!!!</p>
</div>
