(js/jquery) Rotating an image in FF/Saf/Chrome without Canvas OR Zooming a canvas item

Question

I am working on a project where I need to rotate and image to the users' liking then allow them to zoom a bit in and out.

Using jquery.rotate.1-1.js in IE everything works perfectly (how rare) as MS wrote their own rotation tool (progid:DXImageTransform) so the img is rotated and then kept as an image. However looking at the JS I see that if the browser is not IE then a canvas is rendered (i've never really used canvas) which means that once the canvas is drawn with the image rotated I cannot zoom in on the image because if I understand it correctly the canvas doesn't actually hold the information.

I've also attempted CSS3 transforms with my non-IE browser and have everything rotating correctly however when I try and zoom it's using now non-existant div sizes.

Are there any tools out there that allow rotation and then zooming on the client-side? OR Is there a way to rotate an img tag in FF/Chrome/Saf & maintain the rotate image after?

Answer 1

There are some transform CSS version in all current web browsers. I use the following styles for rotation:

.rotate
{
    -webkit-transform: rotate(-90deg);    /* Safari 3.1+, Chrome */
    -moz-transform: rotate(-90deg);       /* Firefox 3.5+ */
    -o-transform: rotate(-90deg);         /* Opera starting with 10.50+ */
    -ms-transform: rotate(-90deg);        /* IE9 */
}
.rotateOldIE
{
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* IE6, IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; /* IE8 */
    zoom: 1;
}

If you search for the CSS styles you will find detailed description of any from the above CSS styles and you will find many examples.

Answer 2

You can check this tool [http://css3.mikeplate.com/][1]

[1]: http://css3.mikeplate.com/ it will allow you do all transformation and see them on the fly so you can test it on different browsers, it allow zomming and rotating