Mirroring/flipping images in IE and maintain transparency

I've been experimenting with flipping background images with this css:

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

Everyth开发者_运维技巧ing works just fine in all browser except for IE when you have a PNG with a transparent background(alpha channel). All transparent and semi-transparent pixel gets completely black.

Anyone knows a workaround for this?

Maybe there is another filter (read "hotfix") that MS implemented to fix this kind of issue. I think the same error applies to rotation and other transformation filters as well with PNG.

---

So, I realize this is 2 years too late. Sorry. :)

But for anyone else getting here, try putting a background-color on the css and that should make it happy (or, at least, it fixes it for the same problem when you fade it in and out, I assume it's all the same masking errors).

---

Use the old IE6 AlphaImageLoader hack to get what you are looking for, along with another DXImageTransform to do the flipping. Unfortunately, it becomes less generic since you must define the image, but you can dynamically set the style with some script. (See here for an example of the dynamic scripting -- look for the pngfix.js code.)

.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);
}

Tested successfully in IE8 and FF3.6. Not sure you need the -ms-filter, but I couldn't test IE6 or IE7, and am not certain if it needs that attribute.