View Full Version : Rotate a DIV by 35 degrees

01-19-2006, 06:40 PM

I need to rotate a DIV by 35 degrees... i'm guessing it'll need a bit of javascript but i'm a bit clueless to be honest... anyone able to point me in the right direction.?

If it helps here's a link to the DIV i'm trying to rotate.



01-19-2006, 07:08 PM
A div can't be rotated. You can only go horizontal or vertical hence why its called the box model. To create a diagonal look you will need to use images.

01-19-2006, 07:24 PM
ok, so i guess i could rotate an image inside a DIV. I could work around that if i knew how...

any ideas?


01-19-2006, 07:26 PM
Umm no. You can't have anything placed at an angle using just html and javascript. You need to create the effect of a diagonal image in a graphics program. Images can only be square. You might be better off using Java or Flash to create a diagonal effect.

01-19-2006, 07:49 PM
For some reason I think you can use an IE filter for that (although that might only be 90 degree rotations). Otherwise, you could use SVG and a <foreignObject> tag, but you wouldn't find support for rotations on that anywhere in supported browser releases.

01-19-2006, 10:30 PM
I think the canvas element WhatWG defines can do it in too.

01-19-2006, 10:36 PM
Yup IE has filter which can be used to rotate, using the BasicImage filter. eg.

#div {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

BUT - that only supports 90, 180, and 270 degree rotations, so it will not place things at an angle.

Using images is the best way.

01-19-2006, 11:05 PM
think you can rotate by a float value and offset the object but the rotation point and math is a problem but trial and error may surfice for a set rotation.