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

Question

我们的页面中有这个 html：

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

提琴手

现在，我们有两个问题：

1. 实现跨浏览器的旋转

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

2. 使div#mouse_targetordiv#mouse_target map或 div#mouse_target map area与 一起旋转div#img。

这可能吗？