CSS transform not working IE

问题:

I have this stylesheet

.rotate div img
{
    -webkit-transform:  translate(-18cm, 2cm) rotate(-90deg); /* WebKit */
    -webkit-transform-origin: top right; 

    -moz-transform: translate(-18cm, 2.5cm) rotate(-90deg);/* Mozilla */
    -moz-transform-origin: top right;

    -o-transform: rotate(90deg); /* Opera */
    -o-transform-origin: top center; 

    -ms-transform: translate(-18cm) rotate(-90deg); /* Internet Explorer */
    -ms-transform-origin: top right;

    -sand-transform: translate(-18cm, 2.5cm) rotate(-90deg);
    -sand-transform-origin top right;

    max-width: 100% !important;

}

I'm having trouble with IE, the transforms are applied and are showing on screen but when I click on the print button, the printed result is without the transforms applied to it.

(added screen in the media to see the effects, before printing)

It works fine with Firefox and Chrome

EDIT

Yes, I was testing on IE9.

Having played with it a bit more yesterday, I noticed that the image did in fact do the transform part, but what is sent to the printer is the image without the transform applied to it.

回答1:

-ms-transform does not exist in IE10+. IE8 and older have no support for CSS transforms, IE9 uses only -ms-transform, and IE10 and newer use only the unprefixed transform.

See http://caniuse.com/#feat=transforms2d for more info if needed.

回答2:

I has same issue but resolved by setting up media attribute to style tag as follows

<style type="text/css" media="print">

回答3:

No need for fancy prefixes, just use normal transform to target MS IE!