javascript - 使用 HTML 热点管理旋转部分

Question

我有下面的菜单需要旋转一个小 Angular :

_{(来源:maroonlemoon.com)}

我已经设法为每个菜单条使用嵌套的 div 来实现外观(容器 div 有黄色背景图像，嵌入的 div 有一个背景图像链接到一个带有每个菜单部分文本的图像)

<div id="the-menu" style="position:absolute; z-index:9998; left:120px; top:-5px; width:255px; height:300px;">
    <div id="home-strip" align="right" style="position:absolute; z-index:1; left:0px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div onclick="javascript:alert('home');" style="cursor:pointer; position:relative; width:90px; height:35px; top:9px; left:6px;  background-image:url('images/menu-text.png');"></div>
    </div> 
    <div id="about-strip" align="right"  style="position:absolute; z-index:2; left:10px; top:30px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div onclick="javascript:alert('about');" style="cursor:pointer; position:relative; width:90px; height:35px; top:10px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -38px; background-repeat:no-repeat"></div>
    </div> 
    <div id="classes-strip" align="right"  style="position:absolute; z-index:3; left:20px; top:60px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; height:35px; top:6px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -76px; background-repeat:no-repeat"></div>
    </div> 
    <div id="team-strip" align="right"  style="position:absolute; z-index:4; left:30px; top:90px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; height:37px; top:7px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -116px; background-repeat:no-repeat"></div>
    </div> 
    <div id="facilities-strip" align="right" style="position:absolute; z-index:5; left:40px; top:120px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:40px; top:10px; left:-3px;  background-image:url('images/menu-text.png'); background-position: 6px -157px; background-repeat:no-repeat"></div>
    </div> 
    <div id="schedule-strip"  align="right" style="position:absolute; z-index:6; left:50px; top:150px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:35px; top:10px; left:4px;  background-image:url('images/menu-text.png'); background-position: 0px -196px; background-repeat:no-repeat"></div>
    </div> 
    <div id="contact-strip"  align="right" style="position:absolute; z-index:7; left:60px; top:180px; width:216px; height:112px; background-image:url('images/menu-sliced.png'); background-position: 0px 0px;">
        <div style="cursor:pointer; position:relative; width:90px; display:block; height:40px; top:10px; left:-5px;  background-image:url('images/menu-text.png'); background-position: 8px -234px; background-repeat:no-repeat"></div>
    </div> 
</div>

不要介意内联样式。我的问题是我想为每个菜单部分(有一个 Angular )创建悬停和单击状态，但是使用 native HTML 实现这一点似乎有点挑战，因为 div 将相交。请引用下面的快照进行说明:

_{(来源:maroonlemoon.com)}

非常感谢您的帮助，我想要一个适用于所有主流浏览器的解决方案(我研究了一个可以解决问题但不跨浏览器兼容的 jQuery 插件)我应该使用经典的 html 热点来做到这一点.我有点讨厌使用它们，觉得它们不再用于此目的

Answer 1

你可以用 CSS 解决这个问题:

你必须应用变换:rotate(150deg);为您或您要旋转的标签设置样式。

div{
    transform: rotate(150deg);
    -ms-transform: rotate(150deg); /* IE 9 */
    -webkit-transform: rotate(150deg); /* Safari and Chrome */
}

这是一个使用 CSS 旋转某物的示例。

http://jsfiddle.net/MathiasaurusRex/hTx2w/1/