Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 281
CheGueVerra Avatar asked Sep 23 '13 22:09

CheGueVerra


1 Answers

-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.

like image 111
Mooseman Avatar answered Oct 10 '22 01:10

Mooseman