logo标签列表

如何在CSS中旋转文本？

csstext-rotation
73

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

输入图像说明

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

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;}

http://jsfiddle.net/koolkabin/yawYM/

8个回答
92
在您的情况下，最好像之前提到的那样使用转换属性中的旋转选项。还有一个名为writing-mode的属性，它的工作方式类似于rotate(90deg)，因此在您的情况下，应该在应用后旋转它。即使在这种情况下它不是正确的解决方案，但是您应该了解此属性。
示例：
writing-mode:vertical-rl;

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

有关 writing-mode 的更多信息：https://css-tricks.com/almanac/properties/w/writing-mode/

11
这绝对是更好的答案，因为它旋转文本而无副作用，例如，给文本添加一个背景并观察如何旋转整个元素，背景也随之旋转。 - mikemaccana
12
这个方法很好。如果你想让文本“向右”朝向（字母顶部指向左侧），使用"writing-mode: vertical-lr;transform: rotate(-180deg);"，可以得到适当的间距和方向。 - Andrew Philips
1
@AndrewPhilips 在编写代码时，使用writing-mode: vertical-rl;最好与transform结合使用，因为它可以使多行文本正常阅读。如果您使用vertical-lr，则每行文本将出现在上一行的上方，而不是下方（或者一旦旋转，将出现在右侧而不是左侧，这与您的预期相反）。 - Malvineous
@Malvineous 说得好。我只考虑了一行。然而，对于多行 -rl 和 transform 层，行按预期的阅读顺序排列。 - Andrew Philips
63

你需要使用CSS3的transform属性rotate-在这里查看哪些浏览器支持它以及需要使用的前缀。

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

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

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

编辑2：我已经预料到了文本居中的问题，并已经更新了我的演示。然而，仍然存在高度/宽度约束，所以较长的文本可能会破坏布局。

编辑3：看起来横向版本是原始计划的一部分，但我无法在演示页面上找到任何配置的方法。 我错了... 新手风琴是即将推出的jQuery UI 1.9的一部分！因此，如果您想要新功能，则可以尝试开发构建。

希望这有所帮助！

我遇到了旋转文本位置的问题。 - KoolKabin
我已经更新了演示，使用CSS3 transform-origin 并将标题居中。如果transform-origin在跨浏览器上的支持不好，您仍然可以使用 position:relative 父级和 position:absolute 子级技巧来移动文本。 - andyb
但是我想知道那些CSS变换的原始值是如何计算的：84px 70px; - KoolKabin
关于jQueryUI手风琴，是否有类似于这个的垂直或水平的版本？ - KoolKabin
@KoolKabin：这些值被选择为一个虚拟的圆心，用于围绕其旋转文本。在这个fiddle中，您可以想象该点位于单词“incididunt”的中间。如果您在Chrome开发者工具中检查<span>，然后更改旋转角度，您应该能够看到该点的位置。我只是选择了给出最佳结果的点。当然，这里肯定有一个数学答案，但我只是想快速解决问题 :-) - andyb
显示剩余2条评论
21

我想 这个链接 可能是你所需要的？

增加一个示例：

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
为添加示例而欢呼，而不仅仅是链接，+1。 - kapa
我在旋转文本的位置上遇到了问题。 - KoolKabin
@KoolKabin，你的小提琴是最新版本吗？ - Rob
是啊，它是最新的版本...我正在本地测试它的下一个版本 - KoolKabin
13

使用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/。
我在旋转文本的位置上遇到了问题。 - KoolKabin
2

enter image description here

也可以。
<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>
1

我认为你需要使用transform: rotate(0.5turn);

0

     h5 {    
            transform: matrix(0,-1,1,0,-9,-18);
            white-space:nowrap;
            display:block;
            bottom:0;
            width:20px;
            height:20px;
            margin: 0;
     }
     div {
     padding-top:70px;
     }
<div>
<h5>Hello World</h5>
</div>

从底部开始写，从左到右，这适用于图像和文本。
或者使用旋转、翻转。 

     h5 {    
            transform: rotate(-1.250turn);
            white-space:nowrap;
            display:block;
            bottom:0;
            width:20px;
            height:20px;
            margin: 0;
     }
     div {
     padding-top:70px;
     }
<div>
<h5>Hello World</h5>
</div>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接