translation not working properly in IE8 #31

abhayastudios opened this Issue Nov 24, 2011 · 2 comments


None yet
2 participants


I am using your JQuery 2D transform plugin to rotate images as follows:

$("#crop_container img").transform(
translateX: translateX+'px',
translateY: translateY+'px',
rotate: rotation+'deg'

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.

Any ideas/advice?


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:

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

with this:

// 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment