圆形菜单菜单项旋转异常求助：Font Icons显示颠倒/歪斜

我明白你遇到的问题了——替换成Font Awesome图标后，菜单展开时图标跟着菜单项一起旋转，导致显示歪掉甚至颠倒。这是因为你的菜单项<li>在hover时同时应用了rotate()和translate()，整个li包括里面的图标都被旋转了。你之前尝试的::after伪元素和错误的选择器（比如menu li li:nth-of-type(1)，这里不存在嵌套的li）都没命中实际的图标元素，所以没效果。

解决方案思路 #

给每个菜单项内部的图标单独添加反向旋转，抵消掉父元素<li>的旋转角度，让图标始终保持正向显示。

修改后的完整代码 #

HTML（修正Font Awesome的class写法）

<menu>
  <li><i class="fas fa-bell"></i></li>
  <li><i class="fas fa-cog"></i></li>
  <li><i class="fas fa-terminal"></i></li>
</menu>

CSS（重点添加图标反向旋转样式）

menu {
  box-sizing: border-box;
  transition: all 0.25s ease-in-out;
  transition-delay: 0.75s;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  background-color: #2e7bbd;
  margin: -45px 0 0 -45px;
  position: fixed;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  right: 2%;
  bottom: 2%;
  z-index: 99999;
}

menu:before, menu:after {
  content: "";
  z-index: 2;
  position: fixed;
  width: 3px;
  height: 22.5px;
  cursor: pointer;
  background-color: #fbfdff;
  top: 50%;
  left: 50%;
}

menu:before {
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  transform: translate(-50%, -50%) rotate(-90deg);
}

menu:after {
  -webkit-transform: translate(-50%, -50%) rotate(0deg);
  transform: translate(-50%, -50%) rotate(0deg);
}

menu li {
  transition: all 0.25s ease-in-out;
  transition-delay: 0.75s;
  width: 59.4px;
  height: 59.4px;
  margin: -29.7px 0 0 -29.7px;
  opacity: 0;
  text-align: center;
  font-size: 18px;
  font-family: Helvetica, sans-serif;
  font-weight: 100;
  line-height: 59.4px;
  color: #fbfdff;
  border-radius: 50%;
  background-color: #428dce;
  list-style-type: none;
  position: fixed;
  z-index: 100;
  left: 50%;
  top: 50%;
}

menu:hover {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
  transition-delay: 0s;
}

menu:hover li {
  transition-delay: 0.1s;
  opacity: 1;
}

/* 菜单项的旋转+位移 */
menu:hover li:nth-of-type(1) {
  -webkit-transform: rotate(359deg) translate(0, 90px);
  transform: rotate(359deg) translate(0, 90px);
}

menu:hover li:nth-of-type(2) {
  -webkit-transform: rotate(310deg) translate(0, 90px);
  transform: rotate(310deg) translate(0, 90px);
}

menu:hover li:nth-of-type(3) {
  -webkit-transform: rotate(260deg) translate(0, 90px);
  transform: rotate(260deg) translate(0, 90px);
}

/* 图标反向旋转修正方向 */
menu:hover li:nth-of-type(1) i {
  -webkit-transform: rotate(-359deg);
  transform: rotate(-359deg);
}

menu:hover li:nth-of-type(2) i {
  -webkit-transform: rotate(-310deg);
  transform: rotate(-310deg);
}

menu:hover li:nth-of-type(3) i {
  -webkit-transform: rotate(-260deg);
  transform: rotate(-260deg);
}

关键说明 #

1. 你之前的menu li li:nth-of-type(1)选择器错误，因为菜单里没有嵌套的<li>，图标是直接放在一级<li>里的<i>标签，所以要直接选中<i>元素。
2. 每个图标的反向旋转角度和对应<li>的旋转角度完全相反，这样就能抵消父元素的旋转，让图标保持正向显示。
3. 可以把图标的旋转样式和菜单项的hover样式绑定，确保只有菜单展开时才应用修正。

内容的提问来源于stack exchange，提问作者Selim Balci