Is it possible to display text at an angle in a web page?

html css text angle
Ryan S picture Ryan S · Mar 23, 2011 · Viewed 14.3k times · Source

I would like to know whether it is possible or not to create text in a web page at an angle, for example at 40 Degrees. If it is possible, how can I do this?

EDIT: Finally, I decided to go with Mathias Bynens's answer.

Answer

Mathias Bynens picture Mathias Bynens · Mar 23, 2011

Use CSS3 transforms:

.selector {
  -webkit-transform: rotate(40deg);
  -moz-transform: rotate(40deg);
  -o-transform: rotate(40deg);
  transform: rotate(40deg);
}

IE does support filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);, where the rotation property accepts one of four values: 0, 1, 2, or 3 which will rotate the element 0, 90, 180 or 270 degrees respectively. It’s a filter though, so I wouldn’t recommended using it.

Related questions

HTML: Changing colors of specific words in a string of text

I have the below message (slightly changed): "Enter the competition by January 30, 2011 and you could win up to $$$$ — including amazing summer trips!" I currently have: <p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;"> formatting the text …

Read More
Setting a max character length in CSS

I am making responsive website for school and my question is: How do I set a max character length of the sentences (with CSS) on my website (like 75 characters) that when I have a very large screen, the sentences wont …

Read More
Vertical Text Direction

I have been trying text to go in a vertical direction like we can do in ms-word tables but so far I have only been able to do THIS... which I am not happy with because it's a box rotated... …

Read More