如何使用CSS旋转文本

时间:2014-03-02 07:23:26

标签: html css

无法旋转文字。灰色div宽度必须为50.使用Chrome。

http://jsfiddle.net/NLfaz/1/

HTML:

<div class="divContactInfo">
    <div class="tabHeader">
        <span class="textRotate">My Contact Info</span>
    </div>
</div>

CSS:

.divContactIno
{
position:fixed;
    right:0;
    border:1px solid red;
    top:49%;
    width:350px;
    height:500px;
}
.divContactInfo .tabHeader
{
border:1px solid gray;
    width:50px;
    height:120px;
}
.textRotate
{
  -webkit-trasform:rotate(-90deg);
    -moz-trasform:rotate(-90deg);
}

4 个答案:

答案 0 :(得分:2)

您无法旋转内嵌元素,并且需要正确拼写transform

.textRotate {
    display: inline-block;
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
}

请注意,您divContactInfo拼写错误divContactIno

http://jsfiddle.net/mattball/R7bQn/

答案 1 :(得分:2)

回复您的评论..试试这个

.textRotate {
    display: block;
    white-space: pre;
    left: 10px;
    margin-top: 80px;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    }

答案 2 :(得分:1)

尝试添加属性display,然后使用Rotate:

.divContactInfo
{
position:fixed;
    right:0;
    border:1px solid red;
    top:49%;
    width:350px;
    height:500px;
}
.divContactInfo .tabHeader
{
border:1px solid gray;
    width:50px;
    height:120px;
}


.textRotate {
display:block;
/* Safari */
-webkit-transform: rotate(-90deg);

/* Firefox */
-moz-transform: rotate(-90deg);

/* IE */
-ms-transform: rotate(-90deg);

/* Opera */
-o-transform: rotate(-90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

http://jsfiddle.net/NLfaz/3/

答案 3 :(得分:0)

    .divContactInfo
    {
    position:fixed;
        right:0;
        border:1px solid red;
        top:49%;
        width:350px;
        height:500px;
    }
    .divContactInfo .tabHeader
    {
    border:1px solid gray;
        width:50px;
        height:120px;
    }
    .textRotate
    {
        display:block;
      -webkit-transform:rotate(-90deg);
        -moz-transform:rotate(-90deg);
    }