Rotating a div in CSS?

[Figure Fan]

Okay, this question goes out to all of the web-savvy people on the forums..

How to I rotate a <div> by degrees in CSS? I did it two years ago, so I know it's possible. I'd like to rotate one by 45 degrees so it scrolls diagonally too. Again, I did this two years ago around this time, and it was through CSS coding.

It's something like "transform-rotate:-45;" or something. I've tried that, and it doesn't work, but it's along those lines. I wish I would have saved that code.

Thanks for any help :)

[captainspud]

transform: rotate (45deg);

[Figure Fan]

transform: rotate (45deg);

SPUD:

ILY ;)

[Figure Fan]

Hmm..

Actually..that's not working either. :(

[Figure Fan]

I'm not really sure what I'm doing wrong. I'm doing the code exactly as it says on this site:

http://webkit.org/specs/CSSVisualEffects/CSSTransforms.html#transform-values

It doesn't appear to be a Firefox issue because it's not working in IE either.

This sucks! :(

[GogglesPizanno]

I think the css transforms (at least the link you provide) are specific to Webkit based browsers (Safari, Chrome) Firefox is based on the Gecko rendering engine and has its own syntax. Something like

-moz-transform: rotate(90deg);

In IE its more hacky. It has a set of filters built in that you can use... see this page:
http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

Its basically an IE css filter property like:
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

Problem is that it can only be used to rotate in 90 degree increments (rotation value*90).

[Epimethee]

FigureFan, as GogglesPizanno already detailed, you are on the bleeding edge of HTML with rotation; most users aren't going to be able to see the rotation of the element. Unless I'm mistaken, it's not in the most recent Internet explorer 8 beta. So, unless the planet gets a browser epiphany, it's going to take quite a few years.

[Figure Fan]

Hm okay.

When I did it before, it was in IE, so it probably was one of the filters (like table gradients). If only IE users will see it, then it kind of defeats the purpose.

Thank you guys for the help though. :)

[Epimethee]

If IE's 90-degree-only rotation is enough for you and if you only need to use this for simple graphical elements, you could always try to use conditional code. Filter for IE, SVG (http://fr.wikipedia.org/wiki/SVG) for every other modern browser. Otherwise, there's always Flash, but at this point, scaling down your design would probably be the better alternative.

BTW, not sure about this particular IE filter, but an issue with them (apart from being completely non-standard, probably abandoned by MS and, in this case, more limited than the standard-based solution) is that they can sometime cause browser crashes.