javascript - CSS3圆形动画

Question

我做了一个 CSS3 圆形动画菜单，菜单项从左端开始，然后向右旋转到相应的位置。
我将每个菜单项都放在一个容器中，并让每个容器旋转到不同的 Angular 以显示动画。
我的问题是，因为每个菜单项都在一个容器内，所以容器的数量与菜单项的数量一样多，这使得无法为每个菜单项内的 anchor 标记获取 :hover 操作因为容器在顶部。 有人可以为此提出修复建议吗？

你可以在这里看到:

http://jsfiddle.net/blueeyes/bWWHm/4/

你可以看到我可以悬停链接 aa 和 fff 因为 aa 没有容器和 fff 是最重要的。
其他链接位于容器下方，因此无法访问。

Answer 1

你把事情搞得太复杂了，你不需要容器。您只需将所有菜单项绝对定位在圆的中心，然后将每个菜单项旋转所需的 Angular ，将其向外平移圆的半径，然后再次旋转相反的 Angular 以使文本再次水平。这样，每个菜单项的中心都会在圆上。

DEMO

HTML:

<ul class='circ-menu'>
  <li><a href='#'>aa</a></li>
  <li><a href='#'>bb</a></li>
  <!-- and so on -->
</ul>

CSS:

.circ-menu {
  position: relative;
  padding: 0;
  width: 10em; height: 10em;
  list-style: none;
}
.circ-menu li {
  position: absolute;
  top: 50%; left: 50%;
  margin: -1.5em;
  width: 3em; height: 3em;
  background: rgba(255, 0, 0, .3);
}
.circ-menu li:first-child {
  transform: rotate(-112.5deg) translateY(-5em) rotate(112.5deg);
}
.circ-menu li:nth-child(2) {
  transform: rotate(-67.5deg) translateY(-5em) rotate(67.5deg);
}
/* and so on */