CODEWITHSUNDEEP
htmlcssimageinternet-explorerrotation
wpearse
wpearse

Reputation: 2422

Image rotation in IE causes automatic translation. How do I remove the translation?

I'm trying to implement a gauge widget for a website. The spec says only HTML/CSS is allowed, so I can't use JavaScript (don't ask me why -- maybe if there's a really simple way of doing it with JavaScript I could persuade the project lead).

So far I have a div with a background image that shows the back of the gauge. Inside this div is an img that is rotated, depending on the gauge value. This value is dynamically injected into the HTML using PHP.

The gauge works fine in Safari/FireFox, but breaks in IE. If I add a border to the image I can see why -- it appears that the IE rotation also includes an automatic translation so that the needle is off-center (see screenshot below).

So, here's the question: how do I shift the needle back to the center of the gauge in IE?

broken needle rotation in internet explorer

<div style="background: url('genies/gauge.png'); background-repeat: no-repeat; height: 235px; overflow: hidden;">

<img src="genies/gauge-needle.png" 
 style="-moz-transform: rotate(45deg); 
        -o-transform: rotate(45deg); 
        -webkit-transform: rotate(45deg); 
        -ms-transform: rotate(45deg); 
        transform: rotate(45deg); 
        filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678118655, M12=-0.70710678118655,M21=0.70710678118655, M22=0.70710678118655, sizingMethod='auto expand'); zoom: 1;" />

</div>

Upvotes: 5

Views: 2682

Answers (3)

idanzalz
idanzalz

Reputation: 1760

I found a solution without JS, for IE - see here

Upvotes: 0

methodofaction
methodofaction

Reputation: 72415

This is going to be difficult to solve without javascript, if your gauge only moves by a couple of increments (say, 15, 30, 45... deg), you could use this tool:

http://www.useragentman.com/IETransformsTranslator/

and manually pass the margin-left and margin-top values to IE.

Otherwise I'd recommend javascript with CSSSandPaper by the same author. http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/.

Upvotes: 0

Dancrumb
Dancrumb

Reputation: 27549

The problem here is that the image is rotating about a point that you don't expect it to.

You need to set the transform origin to the centre of your image.

For instance, you would use -moz-transform-origin, -webkit-transform-origin, -o-transform-origin, -ms-transform-origin, -etc-transform-origin...

Check out this page for information on how to deal with the Matrix filter in MSIE: https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie

Upvotes: 2

Related Questions