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

    How to center bootstrap navba-nav on scroll when fixed?

    How to display a dynamic rating based on css and the value from PHP? [closed]

    CSS dropdown submenu with dynamic width: how to align left?

    How to read CSS specification?

    How to center parts of a list efficiently with CSS [Img Inside]

    how to apply css rule to the previous and the next element in HTML?

    How to change css classes with a button click in javascript?

    how should i set scrollbar properties in css

    How to detect IE8 separate from newer versions when IE8 compatibility set

    How to remove the bottom border of a box with CSS

    how to get a grid of different sizes using css and javascipt

    How to style just one type of input field without also affecting other input types with CSS

    How to show a region on a image with CSS

    How to put banner in css?

    How can I apply CSS selector to attribute values being case sensitive?

    Semantic UI css messing with min-width property. How do I fix?

    How can I make a border wrap around a group of pictures?

    How to make a themeable web application using CSS?

    How do I vertical center text next to an image in html/css?

    CSS: overlay looks fine on Chrome, but not in Firefox 3: how do I fix the vertical offset?

    How to expand and
  • to fit the width of the
      using css? (or even jquery)
  • How to create a Sass mixin for this CSS radial gradient?

    How can I tell a scrollbar to always start at the bottom with CSS?

    How can I apply a style to a div using CSS as long as that div does NOT contain an element with a certain id?

    how to make a div toggle background-position “onclick” while keeping hover

    How to make a centered, responsive CSS circle within a Boostrap div?

    How to make sure the UI always shrinks and fit to the window irrespective of the resolution and device via viewport or CSS

    CSS - how not to scroll parts of the page? [closed]

    How can I remove the border around all the cells in a table?

    html/CSS how to make a div always center when the window is resized [duplicate]