Ruby
Ruby

Reputation: 969

How to rotate text using CSS

Unable to rotate the text. The gray div width has to be 50. Using 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);
}

Upvotes: 0

Views: 109

Answers (4)

davidcondrey
davidcondrey

Reputation: 35953

In response to your comment.. Try this

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

Upvotes: 2

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

Upvotes: 0

Hamed mayahian
Hamed mayahian

Reputation: 2323

try add propertydisplay and then use 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/

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359776

You cannot rotate an inline element, and you need to spell transform correctly.

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

Note that you also misspelled divContactInfo as divContactIno.

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

Upvotes: 2

Related Questions