How to rotate text using CSS

Question

Unable to rotate the text. The gray div width has to be 50. Using Chrome.

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

The text has to be in a single line, and the div width to be 50px. Is this possible. — Ruby
– Ruby, Commented Mar 2, 2014 at 7:31

davidcondrey · Accepted Answer · 2014-03-02 07:35:08Z

2

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

answered Mar 2, 2014 at 7:35

davidcondrey

36.3k18 gold badges119 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Matt Ball · Accepted Answer · 2014-03-02 07:26:36Z

2

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/

answered Mar 2, 2014 at 7:26

Matt Ball

361k102 gold badges655 silver badges725 bronze badges

1 Comment

Ruby Over a year ago

Thank you , but the text has to be in single line. I would like the div width to stay 50 as I have to style it later.

Hamed mayahian · Accepted Answer · 2014-03-02 07:27:10Z

1

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/

answered Mar 2, 2014 at 7:27

Hamed mayahian

2,3436 gold badges29 silver badges49 bronze badges

1 Comment

Ruby Over a year ago

Thank you , but the text has to be in single line. I would like the div width to stay 50 as I have to style it later.

Md Mahmudul Haque Fahim · Accepted Answer · 2014-03-02 07:30:48Z

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

answered Mar 2, 2014 at 7:30

Md Mahmudul Haque Fahim

2834 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to rotate text using CSS

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related