IE9: rotated background images become skewed

Question

Rotating multiple (Pseudo-)Elements in IE9 works fine as long as the background images are referenced through the content attribute:

.icon:before { content:url('…')};

When using background-image everything is also OK as long as only one object is rotated:

When I had to use background-image and transform:rotate on multiple objects I ran into this problem:

The background images of both objects become skewed. Does anybody know the reason and maybe a solution for this? This problem occurs only in "real" IE9, emulating IE9 in DevTools of newer versions of IEs is not reliable.

http://jsfiddle.net/Fiddel/662v79Lm/

Answer 1

I found your question interesting as rotating element is quite interesting

I have updated some of the code .. make the rotation 360 so the things will remain same.

https://jsfiddle.net/aakashshah/662v79Lm/14/

{
transform : rotate(-360 deg);
}