如何在css中旋转文本？答案

【问题标题】：How do I rotate text in css?如何在css中旋转文本？
【发布时间】：2021-08-05 22:41:41
【问题描述】：

如何在 css 中旋转文本以获得以下输出：

hi,

编辑：

感谢您的快速建议。我在 jsfile 中添加了我的示例代码：

HTML：

<div class="mainWrapper">
    <div class="rotateObj">
        <div class="title active">First Text Title</div>
        <div class="content">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
        <div class="title">First Text Title</div>
        <div class="content hide">
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
            Here goes my bla bla bla text and more stuffs...
        </div>
    </div>
</div>

CSS：

    .mainWrapper{margin:0 auto; width:960px; background:#EFEFEF;}
    .rotateObj{position:relative; height:400px;}
    .rotateObj .title{
        float:left;
        background:gray;
        width:50px;
        height:100%;
        
        /** Rounded Border */ 
        border-radius:5px;-moz-border-radius:5px;
        
        /** Rotation */
        -webkit-transform: rotate(-90deg); 
        -moz-transform: rotate(-90deg);    
        transform:rotate(-90deg);
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
    .rotateObj .active{background:green;}
    .rotateObj .content{float:left;width:600px;height:100%;padding:20px;}
    .hide{display:none;}

我面临的问题是，当我们旋转文本时，它会破坏对齐和位置。那么是什么原因造成的，我该如何管理呢？

【问题讨论】：

标签： css text-rotation

【解决方案1】：

在您的情况下，最好使用前面提到的变换属性中的旋转选项。还有 writing-mode 属性，它的工作方式类似于 rotate(90deg) 所以在你的情况下，它应该在应用后旋转。在这种情况下，即使它不是正确的解决方案，但您应该注意此属性。

例子：

writing-mode:vertical-rl;

关于变换的更多信息：https://kolosek.com/css-transform/

更多关于写作模式：https://css-tricks.com/almanac/properties/w/writing-mode/

【讨论】：

这是迄今为止更好的答案，因为它可以旋转文本而没有副作用，例如，为文本添加背景并查看转换整个元素如何旋转它。
这很好用。而且，如果您希望文本面向“右侧”（字母顶部向左），请使用“writing-mode: vertical-lr;transform: rotate(-180deg);”获取间距和方向。
@AndrewPhilips Keeping writing-mode: vertical-rl; 与transform 结合使用效果最佳，因为它可以正常读取多行文本。如果您使用vertical-lr，那么每一行文本都会出现在最后一行的上方而不是下方（或者在旋转后出现在左侧，而不是您期望的右侧）。
@Malvineous 好点。猜我只考虑一条线。但是，使用多行 -rl 和 transform 时，会按照预期的阅读顺序分层。

【解决方案2】：

您需要使用浏览器支持的 CSS3 transform property rotate - see here 以及您需要使用的前缀。

webkit 浏览器的一个例子是-webkit-transform: rotate(-90deg);

编辑：问题发生了很大变化，所以我添加了一个在 Chrome/Safari 中工作的demo（因为我只包含了-webkit- CSS 前缀规则）。您遇到的问题是您不想旋转 title div，而只是旋转其中的文本。如果您删除旋转，<div>s 的位置正确，您需要做的就是将文本包装在一个元素中并旋转它。

作为 jQuery UI 的一部分，已经存在一个更可定制的小部件 - 请参阅 accordion 演示页面。我相信凭借一些 CSS 技巧，您应该能够使手风琴垂直并旋转标题文本 :-)

编辑2：我已经预料到文本中心问题并且已经updated my demo。但是有一个高度/宽度限制，所以较长的文本仍然会破坏布局。

编辑 3： ~~看起来水平版本是 original plan 的一部分，但我在演示页面上看不到任何配置方式。~~我错了... 新的手风琴是 即将推出的 jQuery UI 1.9 的一部分！因此，如果您想要新功能，可以尝试开发版本。

希望这会有所帮助！

【讨论】：

我对旋转文本的位置有问题
嗯...检查了你的小提琴...结果很好。但我用一些额外的文本进行测试，并得到标题没有将中心与容器对齐。尝试“第一行的长文本”而不是“第一行”
我已更新演示以使用 CSS3 transform-origin 并将标题居中。如果transform-origin 不能很好地跨浏览器支持，您仍然可以使用position:relative 父、position:absolute 子技巧来移动文本。
但想知道那些 css 转换 orgini 值是如何计算的：84px 70px;
关于jqueryui 手风琴有垂直的还是水平的和这个类似的？

【解决方案3】：

我猜this 是你要找的？

添加了一个例子：

html:

<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

CSS：

.year
{
    display:block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}

所有示例均来自上述网站。

【讨论】：

+1 并为添加示例而欢呼，而不仅仅是链接。
我对旋转文本的位置有问题
@KoolKabin，你的小提琴是最新版本吗？
是的，它是...最新的...在我的本地测试它的下一个版本

【解决方案4】：

使用writing-mode 和transform。

.rotate {
     writing-mode: vertical-lr;
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
}


<span class="rotate">Hello</span>

【讨论】：

【解决方案5】：

你可以这样使用...

<div id="rot">hello</div>

#rot
{
   -webkit-transform: rotate(-90deg); 
   -moz-transform: rotate(-90deg);    
    width:100px;
}

看看这个小提琴：http://jsfiddle.net/anish/MAN4g/

【讨论】：

我对旋转文本的位置有问题

【解决方案6】：

你也可以

<div style="position:relative;display:block; height:125px;width:300px;">
    <div class="status">
        <div class="inner-point">
            <div class="inner nowrap">
                Some text
            </div>
        </div>
    </div>
</div>

<style>
.status {
    position: absolute;
    background: #009FE3;
    right: 0;
    bottom: 0;
    top: 0;
    width: 37px;
}

.status .inner-point {
    position: absolute;
    bottom: 0;
    left: 0;
    background: red;
    width: 37px;
    height: 37px;
}

.status .inner {
    font-style: normal;
    font-weight: bold;
    font-size: 20px;
    line-height: 27px;
    letter-spacing: 0.2px;
    color: white;
    transform: rotate(-90deg);
}
</style>

【讨论】：