使用原生javascript和css使地图/区域元素旋转

Question

我们在页面中有这个htmls：

<div id="img"></div>
<div id="mouse_target">
    <img style="-moz-user-select: none; border: medium none; width: 27px; height: 35px;" usemap="#imgmap1" src="http://i.stack.imgur.com/S9eo1.png">
    <map name="imgmap1"><area href="javascript:void(0)" style="cursor: pointer;" title="" shape="poly" coords="11,25,22,11,11,1,1,11,11,25,11,33"></map>
</div>

和css：

    #img,#mouse_target{
        width:27px;
        height:35px;
        position:absolute;
        left:40px;
        top:100px;
    }
    #img{
        background:url("http://i.stack.imgur.com/S9eo1.png") no-repeat;
        -moz-transform:rotate(45deg);
    }
#mouse_target{
    opacity:0.01;
}
#mouse_target map{
    -moz-transform:rotate(45deg);
}
#mouse_target map area{
    -moz-transform:rotate(45deg);
}

JsFiddle

现在，我们有两个问题：

1. 在浏览器中实现旋转

   由于-moz-transform不适用于ie。

2. 制作div#mouse_target或div#mouse_target map或 div#mouse_target map area与div#img一起旋转。

这可能吗？