20

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

Vinzcent
  • 1,438
  • 6
  • 33
  • 59
  • 5
    when asking questions like this, please specify the version(s) of IE you're asking about, because it makes a very big difference to the answer. – Spudley Oct 18 '11 at 10:44

4 Answers4

37

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.

Alex LaFroscia
  • 961
  • 1
  • 8
  • 24
Pedram Behroozi
  • 2,447
  • 2
  • 27
  • 48
  • 7
    You can also try the [CSS3 Transform to Matrix converter](http://www.useragentman.com/IETransformsTranslator/) for one off conversions to IE's format. – thirdender Oct 08 '12 at 06:57
  • 1
    -ms-transform: scale(0.5); should be enough for IE9 for a constant zoom. – Kozuch Jul 03 '13 at 09:04
13

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.

Chuck Norris
  • 15,207
  • 15
  • 92
  • 123
Spudley
  • 166,037
  • 39
  • 233
  • 307
  • Thanks for your interesting reply. Unfortunatly zoom seems to scale only the text. And not the dimensions of my div. – Vinzcent Oct 18 '11 at 11:44
  • yes, I guess it depends on what you actually need to achieve as to whether `zoom` will be suitable. – Spudley Oct 18 '11 at 11:46
  • Thanks for the /9 hack tip. I was having some weird behavior in IE9 and 10 because I had zoom in the same style to cover IE8. – dex3703 Apr 27 '12 at 17:08
  • +1. Hope this doesnt interfere with chrome or firefox on specifying the ie hack – Saksham Aug 07 '14 at 05:57
1

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

4esn0k
  • 9,789
  • 7
  • 33
  • 40
0

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

Asinox
  • 6,747
  • 14
  • 61
  • 89