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

I don't know if that's possible bu开发者_StackOverflow中文版t 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 JavaScript libraries like jQuery or something like this?

Thanks

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);
}

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.

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.

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

link