Geek Answers Handbook

Image rotation in IE causes automatic translation. How to delete a translation?

I am trying to implement a calibration widget for a website. The spec says that only HTML / CSS is allowed, so I can't use JavaScript (don't ask me why - maybe if there is an easy way to do this with JavaScript, I could convince the project guide).

So far I have divwith a background image that shows the back of the caliber. Inside this div is imgone that rotates depending on the calibration value. This value is dynamically injected into HTML using PHP.

The sensor works fine in Safari / FireFox , but it breaks down into IE. If I add a border to the image, I can understand why - it seems that IE rotation also turns on automatic translation so that the needle is inactive (see screenshot below).

So here is the question: how to transfer the needle back to the center of the sensor 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>
+5
source share
3 answers

The problem is that the image rotates around a point that you do not expect.

You need to set the start of the conversion to the center of your image.

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

, Matrix MSIE: https://github.com/heygrady/transform/wiki/correcting-transform-origin-and-translate-in-ie

+2

JS, IE - .

0

More articles:


All Articles