css - 如何在css中旋转文本？

Question

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

你好，

编辑：

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

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

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

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

Answer 1

您需要使用 CSS3转换属性 rotate-请参阅此处了解哪些浏览器支持它以及您需要使用的前缀。

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

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

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

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

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

希望这可以帮助！

Answer 2

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

例子：

writing-mode:vertical-rl;

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

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

Answer 3

我想这就是你要找的东西？

添加了一个示例：

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

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

Answer 4

使用writing-mode和transform。

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


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

Answer 5

你可以这样使用...

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

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

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

Answer 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>