CSS rotate text - complicated

Question

This is just a CSS issue, but could be saved with jQuery perhaps or very clever CSS techniques. See what you think. I've created a JSFiddle so you can experiment. http://jsfiddle.net/WMVMW/157/

See problem below.

This only has to work on android and safari browsers - so don't worry about IE!

When I started this project, I originally planned to use CSS3 to rotate some html text - not really fully understanding the implications of transform property.

The idea of what I am doing is an interactive floor plan. I am having lots of absolute positioned DIVS which represent booths/stands. Because some of my DIVS are really thin but high, my idea was to rotate the text inside the DIV -90 degrees.

This is how each DIV is layed out - They're not actually DIV's but A tags with DIV style behaviors.

<a href="" title="" id="200" class="cell"><span>Harley Davidson</span></a>

The span inside of the A tag has display: table cell; behavior, this is so the text can be vertically aligned inside the box.

The ID number on the A tag only does position styles, the class .cell style controls all other behaviors..

My challenge is to introduce a new class called .rotate which rotates the text -90degrees. But still having the same appearance in looks - and the text flows instead of inheriting the width and height from the containing A tag. See below how the rotate class is added...

<a href="" title="" id="200" class="cell rotate"><span>Harley Davidson</span></a>

See the JSfiddle here... with all css styles, and the

http://jsfiddle.net/WMVMW/157/

Any help would be awesome. I hope this is understandable enough.

Are you trying to do like this: jsfiddle.net/rathoreahsan/gjQfY — Ahsan Rathod

tw16 tw16 · Accepted Answer · 2011-08-09T12:14:05

The trick is to rotate the whole a and not just the span. Live example: http://jsfiddle.net/WMVMW/164/

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

#R135, #R135-1 {
    left: -35px;
    top: 85px;
    width:157px;
    height: 42px;    
}

So I reversed the width and height (as it is going to be rotated) and then repositioned it.

CSS rotate text - complicated

2 Answers