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

时间:2012-12-06 02:53:30

标签: css rotation

我们在页面中有这个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_targetdiv#mouse_target mapdiv#mouse_target map areadiv#img一起旋转。

  3. 这可能吗?

0 个答案:

没有答案