我们在页面中有这个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);
}
现在,我们有两个问题:
在浏览器中实现旋转
由于-moz-transform不适用于ie。
制作div#mouse_target
或div#mouse_target map
或
div#mouse_target map area
与div#img
一起旋转。
这可能吗?