70

How do I rotate text in CSS to get following output:

enter image description here

The problem I am facing is that when we rotate the text then it breaks the alignment and positions. So what is causing that, and how can I manage them?

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

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

TylerH
  • 20,799
  • 66
  • 75
  • 101
KoolKabin
  • 17,157
  • 35
  • 107
  • 145

8 Answers8

89

In your case, it's the best to use rotate option from transform property as mentioned before. There is also writing-mode property and it works like rotate(90deg) so in your case, it should be rotated after it's applied. Even it's not the right solution in this case but you should be aware of this property.

Example:

writing-mode:vertical-rl;

More about transform: https://kolosek.com/css-transform/

More about writing-mode: https://css-tricks.com/almanac/properties/w/writing-mode/

Nesha Zoric
  • 6,218
  • 42
  • 34
  • 11
    **This is by far the better answer as it rotates the text without side effects**, eg, add a background to the text and see how transforming the entire element rotates that too. – mikemaccana Feb 13 '19 at 13:34
  • 12
    This works great. And, if you want the text to face to the "right" (tops of letters to left), use "writing-mode: vertical-lr;transform: rotate(-180deg);" which gets the spacing and orientation. – Andrew Philips Apr 29 '20 at 19:19
  • 1
    @AndrewPhilips Keeping `writing-mode: vertical-rl;` works best when combined with `transform`, as it makes multiline text read normally. If you use `vertical-lr` then each line of text appears above the last rather than below it (or to the left of it once rotated, rather than to the right as you'd expect). – Malvineous Oct 20 '21 at 09:00
  • @Malvineous good point. Guessing I was only considering one line. However, with multi line `-rl` and `transform` layers the lines in the expected reading order. – Andrew Philips Oct 20 '21 at 12:11
63

You need to use the CSS3 transform property rotate - see here for which browsers support it and the prefix you need to use.

One example for webkit browsers is -webkit-transform: rotate(-90deg);

Edit: The question was changed substantially so I have added a demo that works in Chrome/Safari (as I only included the -webkit- CSS prefixed rules). The problem you have is that you do not want to rotate the title div, but simply the text inside it. If you remove your rotation, the <div>s are in the correct position and all you need to do is wrap the text in an element and rotate that instead.

There already exists a more customisable widget as part of the jQuery UI - see the accordion demo page. I am sure with some CSS cleverness you should be able to make the accordion vertical and also rotate the title text :-)

Edit 2: I had anticipated the text center problem and have already updated my demo. There is a height/width constraint though, so longer text could still break the layout.

Edit 3: It looks like the horizontal version was part of the original plan but I cannot see any way of configuring it on the demo page. I was incorrect… the new accordion is part of the upcoming jQuery UI 1.9! So you could try the development builds if you want the new functionality.

Hope this helps!

andyb
  • 43,435
  • 12
  • 121
  • 150
  • m having problem with position of the rotated text – KoolKabin May 17 '11 at 09:25
  • hm... checked your fiddle... its resulting good. but i test with some extra text and got title not aligning center to the container. trying "Long text on first line" instead of "first line" – KoolKabin May 17 '11 at 10:13
  • I have updated the demo to use the CSS3 [transform-origin](http://www.w3.org/TR/css3-2d-transforms/#transform-origin-property) and to center the titles. You could still use the `position:relative` parent, `position:absolute` child trick to move the text if `transform-origin` is not well supported cross-browser. – andyb May 17 '11 at 10:19
  • but wondering how are those css transformation orgini value calculated: `84px 70px;` – KoolKabin May 17 '11 at 10:24
  • about jqueryui accordian is there vertical or horizontal whatever similar to this one too? – KoolKabin May 17 '11 at 10:25
  • @KoolKabin: the values were chosen to be a _virtual_ center point of a circle in which to rotate the text around. In the fiddle you can imagine that point in the middle of the word _incididunt_. If you inspect the `` in Chrome developer tools and then change the rotation angle you should be able to _see_ where the point is. I just chose the point that gave the best result. There is certainly a mathematical answer to it but I was being quick :-) – andyb May 17 '11 at 10:40
  • Searching for jquery horizontal accordion, I found http://www.marghoobsuleman.com/jQuery-common-accordion to have a nice demo, however the vertical text is accomplished with images and not CSS rotation. – andyb May 17 '11 at 10:43
21

I guess this is what you are looking for?

Added an example:

The html:

<div class="example-date">
  <span class="day">31</span> 
  <span class="month">July</span> 
  <span class="year">2009</span>
</div>

The css:

.year
{
    display:block;
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); //For IE support
}

Alle examples are from the mentioned site.

Rob
  • 6,731
  • 12
  • 52
  • 90
13

Using writing-mode and transform.

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


<span class="rotate">Hello</span>
Anoop SG
  • 131
  • 1
  • 3
5

You can use like this...

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

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

Have a look at this fiddle:http://jsfiddle.net/anish/MAN4g/

Anish
  • 2,889
  • 1
  • 20
  • 45
2

enter image description here

also you can

<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>
mdimai666
  • 699
  • 8
  • 14
1

I think you need to use transform: rotate(0.5turn);

ahmad-g-mustafa
  • 61
  • 3
0

     h5 {    
            transform: matrix(0,-1,1,0,-9,-18);
            white-space:nowrap;
            display:block;
            bottom:0;
            width:20px;
            height:20px;
            margin: 0;
     }
     div {
     padding-top:70px;
     }
<div>
<h5>Hello World</h5>
</div>

start writing from bottom, from left to right, this working for both image and text

or using rotate, turn

     h5 {    
            transform: rotate(-1.250turn);
            white-space:nowrap;
            display:block;
            bottom:0;
            width:20px;
            height:20px;
            margin: 0;
     }
     div {
     padding-top:70px;
     }
<div>
<h5>Hello World</h5>
</div>
Mahmoud Magdy
  • 662
  • 10
  • 13