简体   繁体   中英

IE9: CSS msTransform:translate

I'm trying to zoom a div in a page that contains multiple images and html maps. Of course I want to preserve the proportions between elements and html maps.
I'm trying to set the needed CSS properties using JQuery.

In Chrome the CSS property "zoom" seems to work. The images have and absolute positioning and i read that's why such property doesn't work in IE.

So I've tried to use CSS transformations in this way:

$("#div_name").css("transform"    ,"translate(" + x + "px," + y + "px)");
$("#div_name").css("transform"    ,"scale(" + zoomVal + "," + zoomVal + ")");

and I've also tried using matrix:

$("#div_name").css("transform","matrix( " + zoom + ", 0 , 0 , " + zoom  + " , " + x + " , " + y + " )");

Both methods works great in Firefox and IE10 (not with Chrome), but that doesn't work in IE9, it simply ignores the CSS directives.
I've tried to use all the methods above using "msTransform" instead of "transform" but with no success.

The best result I had was using both"scale" and "translate" properties with the "msTransform" property.
This way IE9 does scale the image, but it seems to ignore the "translate" property.

I don't understand why IE9 has this behaviour and I would like to know a way to make it work.
Thanks in advance.

check this :

use -ms- prefix like this :

-ms-transform

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM