CODEWITHSUNDEEP
javascriptjquery-pluginsinternet-explorer-8image-rotation
Joni
Joni

Reputation: 841

Rotating in IE8: translation not working properly

I have a need to rotate an image in a web application. In an earlier post it was explained to me that on rotation I need to 'translate' the image because the center point changes.

I'm using the HeyGrady 2D transfrom JQuery plugin for rotating and provide it the translation as was suggested, which works fine on FF/Chrome/Safari/IE9. However, on IE8 this does not work well.

Please have a look at the following link.

If you run this on FF/Chrome/Safari/IE9 the image rotates just fine (stays within the black border). However, if you run this on IE8 it will cross the black border boundary when rotating to 90 or 270 degrees.

The plugin project page mentions that "IE also lacks support for transform-origin and translate() [...] The jQuery Transform plug-in handles these calculations automatically". However, it does not seem to do so.

Anyone has any ideas what the problem may be?

Thanks!

Upvotes: 1

Views: 716

Answers (1)

brendanmckeown
brendanmckeown

Reputation: 130

I also ran into this same issue in IE 8 using HeyGrady's jQuery transform plugin. Here's a fix by adding this to the execMatrix function, around line 290:

Replace this line:

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

Upvotes: 2

Related Questions