is it possible to rotate a div on x,y,z axises ?

Question

Hello

i don't know if that's possible but i don't know anything about this, so i decided to ask. is it possible to rotate a div on x,y,z axises using javascipt library like Jquery ? or something like this?

Thanks

Answer 1

You can position via x and y (left and top properties in CSS).

You will need to have position: absolute or something other than static.

You may also change the z-order (stacking height). Also works in conjunction with something besides position: static (which is default).

However, with CSS3 you can rotate a div.

#my-div {
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg);
}

Answer 2

There is a jQuery addon to rotate (using the transform described in the other answer), but it doesn't work for IE.

If you are interested, check it out here.

If you want to rotate an image, this plugin will work for all browsers.

Answer 3

AFAIK, no. There is nothing I know which can achieve that for the time being. To simulate a 3D rotation, the closest approach is to do it via some javascript canvas manipulation libraries. I happened to find a Javascript 3D renderer the other day. Check it out if you're interested. However, you should know that even with the Canvas 3d JS Library available, we won't be able to make a div (outside the canvas) to rotate in 3D.

Answer 4

this jQuery plugin works for images, you could use it with divs

link