You can clone with
I am using your JQuery 2D transform plugin to rotate images as follows:
Where the crop_container is an absolutely positioned div wrapped around the image as you suggested in another issue. The translation is calculated on basis of the image orientation (portrait/landscape) and its rotation. For landscape and 90 or 270 degrees it is:
translateX = '-'+translate;
translateY = translate;
All is good in FF/Webkit/IE9, but in IE8 it seems the translation is off. I read in a wiki page that "IE also lacks support for transform-origin and translate() [...] The jQuery Transform plug-in handles these calculations automatically". If this is true then I must be doing something wrong or there is a bug.
I'm also having trouble with this same issue. In IE 8, when a rotated object is translated, it moves along it's own axis, not straight up/down/left/right, so you can get some funky results. Every other browser including IE 9 performs this transformation correctly. See this example: http://jsfiddle.net/kzMff/9/
Does anyone have a solution to this?
I found a fix for this issue, at least for my usage. In the execMatrix function, replace this line (around 290):
this.fixPosition(matrix, tx, ty);
// factor in the object's current rotation so translation remains straight up/down/left/right
// otherwise, object will be translated along the rotated axis, which produces undesirable effects
var rotation = parseInt(this.$elem.css('rotate')) * -1, // the current rotation in degrees, inverted
radians = rotation * (Math.PI / 180), // convert degrees to radians
newX = (tx * (Math.cos(radians))) - (ty * (Math.sin(radians))), // calculate new x
newY = (tx * (Math.sin(radians))) + (ty * (Math.cos(radians))); // calculate new y
this.fixPosition(matrix, newX, newY);
Hope this helps.