2

I'm trying to rotate a block of text slightly like below:

enter image description here

Can this be done with css or do I need to use javascript?

J82
  • 2,327
  • 5
  • 26
  • 32

4 Answers4

3

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. 

<div id="skewed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu metus nisi. Integer non adipiscing massa. Etiam et diam magna. Mauris sit amet arcu dui, a malesuada erat.</div>

#skewed {
    font: 21px Impact, 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);
}
thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Nice contribution thirtydot, I'm going to revoke mine. – Wesley Murch May 12 '11 at 21:11
  • Funny, I just clicked to upvote yours because it's the same idea I have but less fleshed out and got a message "deleted posts can't be voted on" ;) – thirtydot May 12 '11 at 21:12
  • 2
    Well if anyone's interested in the crazy example link here it is: http://www.useragentman.com/tests/cssSandpaper/cube3.html – Wesley Murch May 12 '11 at 21:15
  • If you don't care about IE7/8 you can use the `-ms-transform` vendor prefix for IE9, but if cross browser support is needed this is the better solution. – scurker May 12 '11 at 21:17
  • 1
    @J82: I picked `skew` because it looked like your text was skewed. However, I see now that it looks more like a rotated italic font. You can replace `skew` with `rotate`, like this: http://jsfiddle.net/dRQaw/2/ – thirtydot May 12 '11 at 21:19
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);
}
scurker
  • 4,733
  • 1
  • 26
  • 25
1

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.

Marc B
  • 356,200
  • 43
  • 426
  • 500
  • Who knows. Some people just can't deal with negativity? – Marc B May 12 '11 at 21:36
  • @kennis and Marc: I downvoted because I didn't think this was a useful answer, and misleading at worst in regards to the "has nothing to do *whatsoever* with presentation". It also doesn't mention anything about how to use CSS to accomplish this. It only barely answers the literal question: `Can this be done with css or do I need to use javascript?` Which of course, most likely means that OP doesn't know the CSS solution. So, am I being too harsh with the downvotes? – Wesley Murch May 12 '11 at 22:15
  • Eh, I don't know. I agree with the idea that "answers" should generally provide a solution - but I do think it's important that people understand that in this particular case, Javascript would only be manipulating CSS properties. It can't rotate anything on its own. – Kevin Ennis May 12 '11 at 22:18
0

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);
}
Todd
  • 676
  • 5
  • 12