How do i rotate text in css
How do i rotate text in css to get following output...
Thanks for quick suggestion. I have added my sample code in jsfidle:
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?
One example for webkit browsers is
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.
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!