CSS3 transform:scale in IE

Question

I would like to use the CSS3 property transform:scale.

div
{
     transform: scale(0.5,0.5);
}

Is there a way to imitate this in Internet Explorer 8 and lower? May be something with filter or a Javascript solution?

I've searched the web without any result.

Thanks a lot, Vincent

Answer 1

Try this: https://github.com/pbakaus/transformie

Answer 2

http://msdn.microsoft.com/en-us/library/ms533014(v=vs.85).aspx

although, filters in IE isn't easy to use and they are not always combined with other css effects....

but IE 9 support scale https://developer.mozilla.org/en/CSS/transform

Answer 3

No, IE8 and earlier do not support the standard transform style. IE9 does support it though.

There are solutions you could try using the filter style, but they will be messy.

But for the simple case that you're describing in the question (basically a simple scaling down), you could use the IE-proprietary zoom property.

Since it's non-standard, the most common use of zoom is withzoom:1, which is used to fix a number of IE's layout glitches (particlarly in IE6 and IE7). But it does also do actual zooming as well, and you can use zoom:0.5 to achieve the effect you're looking for.

The good thing about using zoom is that it is works in IE like any other normal CSS property (the filter alternative has some serious rendering quirks that you need to know about).

The only down-side of using zoom is that you'd need to disable it in IE9 or later, otherwise it'll interract with your transform style and have some unwanted effects. I'm not one to generally support the use of CSS hacks, but you could use the /9 hack (documented here) to make it only affect IE8 and earlier, meaning you can specify both the transform and the zoom in the same stylesheet, like so:

div {
  transform: scale(0.5,0.5);
  zoom: 0.5\9;
}

Otherwise you'd need to use conditional comments to determine whether to use it.

Obviously if you want to do anything more complex than a simple proportional scale, then zoom won't be suitable, but for a simple case like the one in your question it will be perfect.

Answer 4

IE9 supports transform:

-ms-transform: scale(0.5,0.5);

For other versions of IE, there's a complex syntax. Something like this:

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=1.5320888862379554, M12=-1.2855752193730787,
    M21=1.2855752193730796, M22=1.5320888862379558);

Look here for more info.