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

Jsフィドル

ここで、2 つの問題があります。

1. ブラウザ全体で回転を実装する

   -moz-transform は ie では機能しないため。

2. div#mouse_targetまたはdiv#mouse_target mapまたは をdiv#mouse_target map areaで回転させdiv#imgます。

これは可能ですか？