How do i rotate text in css

Tags: css,css3,text-rotating

Problem :

How do i rotate text in css to get following output...

enter image description herehi,


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?

Solution :

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!

    CSS Howto..

    How to create a medal in css [closed]

    How to make div access the remaining space without using fixed height values?

    How can I display social media icons in a horizontal line instead of vertical row

    How do I make the whole area of a list item in my navigation bar, clickable as a link?

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    How to center CSS Navigation Menu

    HTML/CSS: How to make “password” input show the password?

    How can I make vertical switch

    How to get these tables stacked on top of each other?

    How to offset div columns in CSS grid system

    HTML5/CSS3 how to expand an anchor element to fit full size of it's li parent

    How can I toggle between multiple .css with jquery?

    CSS Keyframes: How to move div to certain position

    How to add elements to an specified position without influence of other elements?

    how to add css for div tag

    How do you close the CSS preview view in Eclipse?

    How to show a node in a block in drupal 7

    How to access and modify imported .css files in WordPress style.css file?

    How to make pagination's circle of slider using CSS only?

    CSS Icons are working locally in the app, but are not showing on Heroku?

    How to override Liferay core' css?

    How to get a child element to size according to parent's min-height?

    How can I force a table cell onto a new row

    How to play a video inside a logo

    How to extract r, g, b, a values from CSS color?

    How to use a JQuery Show/Hide script, to show hidden text

    How to set the RadioButton icon style to nothing in CSS (in Flex 3)?

    CSS how to hide resize divs while keeping it centerd

    How to change background while changing visiblity?

    How to prevent in-line list from wrapping