Rotating Text Slightly—should I Use Css Or Javascript?

I'm trying to rotate a block of text slightly like below: Can this be done with css or do I need to use javascript?

Solution 1:

You can do it in a cross browser fashion using CSS3's transform, and a filter for IE.

See:http://jsfiddle.net/dRQaw/

This is the magical tool used to generate the cross-browser CSS.

<divid="skewed">Loremipsumdolorsitamet,consecteturadipiscingelit.Quisqueeumetusnisi.Integernonadipiscingmassa.Etiametdiammagna.Maurissitametarcudui,amalesuadaerat.</div>#skewed {font:21pxImpact,sans-serif;text-align:center;background:#ccc}#skewed {width:350px;height:140px;-moz-transform:skew(-5deg,-5deg);-o-transform:skew(-5deg,-5deg);-webkit-transform:skew(-5deg,-5deg);transform:skew(-5deg,-5deg);}

Solution 2:

You can do it with CSS3 transforms:

p {
  -moz-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

Solution 3:

It'd be CSS-only. You can use JS to manipulate the CSS, but JS itself has nothing to do whatsoever with presentation, other than being one method of changing the presentation rules.

Solution 4:

You could use CSS. Here is CSS that will work in Firefox, Opera and Safari/Chrome.

#textToRotate {
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
}