如何使用CSS旋转文字

Question

无法旋转文本。 灰色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);
}

Answer 1

您不能旋转内联元素，并且需要正确拼写transform 。

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

请注意，您还将divContactInfo拼写为divContactIno 。

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

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

Answer 3

尝试添加属性display ，然后使用旋转：

.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/

Answer 4

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