CSS 我如何在css中旋转文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6028128/
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
How do i rotate text in css
提问by KoolKabin
How do i rotate text in css to get following output...
我如何在 css 中旋转文本以获得以下输出...
hi,
你好，
Edit:
编辑：
Thanks for quick suggestion. I have added my sample code in jsfidle:
感谢您的快速建议。我在 jsfidle 中添加了我的示例代码：
http://jsfiddle.net/koolkabin/yawYM/
http://jsfiddle.net/koolkabin/yawYM/
The problem i am facing is that when we rotate the text then it breaks the alignment and positions... so what is causing that and how can i manage them?
我面临的问题是，当我们旋转文本时，它会破坏对齐方式和位置……那么是什么导致了这种情况，我该如何管理它们？
采纳答案by andyb
You need to use the CSS3 transform propertyrotate- see herefor which browsers support it and the prefix you need to use.
您需要使用 CSS3转换属性rotate-请参阅此处了解哪些浏览器支持它以及您需要使用的前缀。
One example for webkit browsers is -webkit-transform: rotate(-90deg);
webkit 浏览器的一个例子是 -webkit-transform: rotate(-90deg);
Edit:The question was changed substantially so I have added a demothat works in Chrome/Safari (as I only included the -webkit-CSS prefixed rules). The problem you have is that you do not want to rotate the title div, but simply the text inside it. If you remove your rotation, the <div>s are in the correct position and all you need to do is wrap the text in an element and rotate that instead.
编辑：问题发生了很大变化，所以我添加了一个适用于 Chrome/Safari的演示（因为我只包含了-webkit-CSS 前缀规则）。您遇到的问题是您不想旋转标题 div，而只是旋转其中的文本。如果您移除旋转，则<div>s 位于正确的位置，您需要做的就是将文本包裹在一个元素中并旋转它。
There already exists a more customisable widget as part of the jQuery UI - see the accordiondemo page. I am sure with some CSS cleverness you should be able to make the accordion vertical and also rotate the title text :-)
作为 jQuery UI 的一部分，已经存在一个更可定制的小部件 - 请参阅手风琴演示页面。我相信通过一些 CSS 技巧，您应该能够使手风琴垂直并旋转标题文本 :-)
Edit 2:I had anticipated the text center problem and have already updated my demo. There is a height/width constraint though, so longer text could still break the layout.
编辑 2：我已经预料到文本中心问题并且已经更新了我的演示。但是有高度/宽度限制，因此较长的文本仍然可能会破坏布局。
Edit 3:It looks like the horizontal version was part of the original planbut I cannot see any way of configuring it on the demo page.I was incorrect… the new accordion is part of the upcomingjQuery UI 1.9! So you could try the development builds if you want the new functionality.
编辑 3：看起来水平版本是原始计划的一部分，但我在演示页面上看不到任何配置它的方法。我错了……新的手风琴是即将推出的jQuery UI 1.9 的一部分！因此，如果您想要新功能，可以尝试开发版本。
Hope this helps!
希望这可以帮助！
回答by Nesha Zoric
In your case, it's the best to use rotate option from transform property as mentioned before. There is also writing-modeproperty and it works like rotate(90deg) so in your case, it should be rotated after it's applied. Even it's not the right solution in this case but you should be aware of this property.
在您的情况下，最好使用前面提到的转换属性中的旋转选项。还有一个writing-mode属性，它的工作原理类似于 rotate(90deg) 所以在你的情况下，它应该在应用后旋转。即使在这种情况下它不是正确的解决方案，但您应该了解此属性。
Example:
例子：
writing-mode:vertical-rl;
More about transform: https://kolosek.com/css-transform/
有关转换的更多信息：https: //kolosek.com/css-transform/
More about writing-mode: https://css-tricks.com/almanac/properties/w/writing-mode/
更多关于写作模式：https: //css-tricks.com/almanac/properties/w/writing-mode/
回答by Rob
I guess thisis what you are looking for?
我想这就是你要找的？
Added an example:
添加了一个示例：
The html:
html：
<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
The css:
css：
.year
{
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}
Alle examples are from the mentioned site.
所有示例均来自上述站点。
回答by Anish
You can use like this...
你可以这样使用...
<div id="rot">hello</div>
#rot
{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
width:100px;
}
Have a look at this fiddle:http://jsfiddle.net/anish/MAN4g/
看看这个小提琴：http: //jsfiddle.net/anish/MAN4g/
回答by Anoop SG
Using writing-modeand transform.
使用writing-mode和transform。
.rotate {
writing-mode: vertical-lr;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
}
<span class="rotate">Hello</span>
