Image mirroring / scrolling in IE and transparency support

Question

I experimented with translating background images using this css:

.flipHorizontal {
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}

Everything works fine in all browsers except IE when you have PNG with a transparent background (alpha channel). All transparent and translucent pixels become completely black.

Does anyone know a workaround for this?

Perhaps there is another filter (see "fix") that MS performed to fix these kinds of problems. I think the same error applies to rotation and other conversion filters, as well as PNG.

Answer 1

IE6 AlphaImageLoader hack, , , DXImageTransform, . , , , script. (. - pngfix.js.)

.flipHorizontal {
   -moz-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myImage.png')
           progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}

IE8 FF3.6. , -ms, IE6 IE7, , .

Answer 2

, , 2 . .:)

- , , css, (, , , , , ).