why the matrix filter does not work in ie

This is a post first posted at stackoverflow,but I got no answer,so I post it here,once get an solution,I will post it at stackoverflow.

I try to rotate the elment in ie, so I use the matrix filter,html:

HTML Code:

---

<div id="car" style="position: absolute; width: 52px; height: 26px; -moz-transform: rotate(45deg); left: 20px; top:206px; z-index: 1000;">
    <img src="http://i.stack.imgur.com/dcwtR.png" />
</div>

---

Then add the filter:

Code:

---

        var a=document.getElementById("car"),b=45;
        a.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(sizingmethod="auto expand")';
        var e = Math.cos(b * Math.PI / 180),
        c = Math.sin(b * Math.PI / 180),
        g = a.filters.item(0);
        g.M11 = g.M22 = e;
        g.M21 = -c;
        g.M12 = c;

---

Then the div is rotated, but there are a black outline around the image.

JsFiddle

Note the black outline:Attachment 15259

Just a guess, but it could be due to the fact that the image is a .png. If the black outline is actually transparent in the original image, you could be seeing an artifact of Microsoft's original .png image handler which didn't do well with .png transparency as I recall. You might try converting the image to .gif as a test.

Does the image need to rotate dynamically? You could use software on the server to handle the rotation on demand. It would be slower than JavaScript alone, but it would be more reliable.

Quote:

---

Does the image need to rotate dynamically?

---

Yes.

We have to change the rotatation according to the data by server.

You can find some details about our application here;

If I understand correctly, you're creating an interactive map where the map is overlaid with an image of a car and both images get updated as needed. While you could continually update both elements from their respective servers, I'd be inclined to create a set of images of the car - each one showing the car at a different angle of rotation. You could then pre-load the set of images in the browser and simply change the 'src' property of the image with JavaScript as desired with no load on the server or the Internet connection, and no browser issues. Is that possible with your implementation?