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,

Edit:

Thanks for quick suggestion. I have added my sample code in jsfidle:

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

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..

    CSS - How to make different background color from css file used [closed]

    css google font how to download and embedd in css to avoid slow load times

    How can I divide the screen to these divs in css?

    How to color portion of text using css or jquery

    How to nest classes in css modules and react?

    how to show background image(multiple) if out of current div

    How to vertically align text to the right of some text using css? [closed]

    How to make an infinite horizontal container with fixed height

    How to make a web form with 3 columns?

    How can I make this jQuery effect responsive?

    How to make CSS/HTML prototyping faster for engineers without strong CSS skills?

    How to arrange images at middle of vertical using css?

    How to add an informative popup over a given text

    How to align dropdown sub menu?

    How to test for existence of CSS class in JavaScript without jQuery?

    How to reset parent child relationship between nested div

    How to Hide Specific Part of Flash Object Using CSS?

    how to change the opacity of the text along with the colorscale of the image in css?

    How to reduce the height of a button with CSS?

    How to structure CSS classes? By entities or by aspects?

    how do i css position this divs according to my layout picture?

    How to use Ant to concatenate CSS files from external CSS @import file

    How do I download many of the same pictures fewer times with html, css, jquery, etc.?

    How to vertically center an element, that has a float, with CSS or JavaScript

    How to make common reusable css for almost every common things in web design?

    How to display child elements of
  • at 100% height?
  • How to prevent span tags overlapping each other?

    How to apply css for a class within h2?

    CSS Keyframes: How to move div to certain position

    How to generate a elongated hexagon shape with two circular sides?