Html “变换”“旋转”菜单项“循环”菜单

我修改了我找到的循环菜单 但我在围绕主圆圈旋转菜单项时遇到问题。默认情况下，该笔的底部垂直于其相对位置，但由于我使用字体图标对其进行了更改，因此它们看起来颠倒或弯曲

我是一个CSS noob，所以我需要一些帮助，请，已经在这几个小时了

我试过以下几种方法：

菜单li:：after{
变换：旋转（0度）；
-webkit变换：旋转（0度）；
}

或者类似的

菜单li li:n类型（1）{
-webkit变换：旋转（180度）平移（0,0）；
变换：旋转（180度）平移（0,0）；
}

他们似乎都没有工作。当前我的组件如下所示：

这是我完整的CSS和HTML

菜单{
过渡：所有0.25秒缓进缓出；
过渡延迟：0.75s；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
背景色：#2e7bbd；
利润率：-45px0-45px；
位置：固定；
宽度：90px；
高度：90px；
边界半径：50%；
光标：指针；
右：2%；
底部：2%；
z指数：99999；
}
菜单：前，菜单：后{
内容：“；
z指数：2；
位置：固定；
宽度：3倍；
身高：22.5px；
光标：指针；
背景色：#fbfdff；
最高：50%；
左：50%；
}
菜单：之前{
-webkit变换：平移（-50%，-50%）旋转（-90度）；
变换：平移（-50%，-50%）旋转（-90度）；
}
菜单：之后{
-webkit变换：平移（-50%，-50%）旋转（0度）；
变换：平移（-50%，-50%）旋转（0度）；
}
菜单里{
过渡：所有0.25秒缓进缓出；
过渡延迟：0.75s；
宽度：59.4px；
身高：59.4px；
保证金：-29.7px 0-29.7px；
不透明度：0；
文本对齐：居中；
字号：18px；
字体系列：Helvetica，无衬线；
字号：100；
线高：59.4px；
颜色：#fbfdff；
边界半径：50%；
背景色：#428dce；
列表样式类型：无；
位置：固定；
z指数：100；
左：50%；
最高：50%；
}
菜单李：：之后{
变换：旋转（0度）；
-webkit变换：旋转（0度）；
}
菜单li li:n类型（1）{
-webkit变换：旋转（180度）平移（0,0）；
变换：旋转（180度）平移（0,0）；
动画名称：疯狂；
动画持续时间：2秒；
动画延迟：1s；
动画迭代次数：无限；
}
菜单李莉：第n种类型（2）{
-webkit变换：旋转（0度）平移（0,0）；
变换：旋转（0度）平移（0,0）；
}
菜单李莉：第n种类型（3）{
-webkit变换：旋转（0度）平移（0,0）；
变换：旋转（0度）平移（0,0）；
}
菜单：悬停{
-webkit变换：旋转（-180度）；
变换：旋转（-180度）；
转换延迟：0s；
}
菜单：鼠标悬停李{
过渡延迟：0.1s；
不透明度：1；
}
菜单：悬停li:n类型（1）{
-webkit变换：旋转（359度）平移（090px）；
变换：旋转（359度）平移（090px）；
}
菜单：悬停li:n类型（2）{
-webkit变换：旋转（310deg）平移（090px）；
变换：旋转（310deg）平移（090px）；
}
菜单：悬停li:n类型（3）{
-webkit变换：旋转（260度）平移（0，90像素）；
变换：旋转（260度）平移（0，90像素）；
}

一,
二,
三,

菜单{
过渡：所有0.25秒缓进缓出；
过渡延迟：0.75s；
-webkit变换：旋转（0度）；
变换：旋转（0度）；
背景色：#2e7bbd；
利润率：-45px0-45px；
位置：固定；
宽度：30px；
高度：70像素；
边界半径：50%；
光标：指针；
右：2%；
底部：2%；
z指数：99999；
}
菜单：前，菜单：后{
内容：“；
z指数：2；
位置：固定；
宽度：3倍；
身高：22.5px；
光标：指针；
背景色：#fbfdff；
最高：50%；
左：50%；
}
菜单：之前{
-webkit变换：平移（-50%，-50%）旋转（-90度）；
变换：平移（-50%，-50%）旋转（-90度）；
}
菜单：之后{
-webkit变换：平移（-50%，-50%）旋转（0度）；
变换：平移（-50%，-50%）旋转（0度）；
}
菜单里{
过渡：所有0.25秒缓进缓出；
过渡延迟：0.75s；
宽度：59.4px；
身高：59.4px；
保证金：-29.7px 0-29.7px；
不透明度：0；
文本对齐：居中；
字号：18px；
字体系列：Helvetica，无衬线；
字号：100；
线高：59.4px；
颜色：#fbfdff；
边界半径：50%；
背景色：#428dce；
列表样式类型：无；
位置：固定；
z指数：100；
左：50%；
最高：50%；
}
菜单李：：之后{
变换：旋转（0度）；
-webkit变换：旋转（0度）；
}
菜单li li:n类型（1）{
-webkit变换：旋转（180度）平移（0,0）；
变换：旋转（180度）平移（0,0）；
动画名称：疯狂；
动画持续时间：2秒；
动画延迟：1s；
动画迭代次数：无限；
}
菜单李莉：第n种类型（2）{
-webkit变换：旋转（0度）平移（0,0）；
变换：旋转（0度）平移（0,0）；
}
菜单李莉：第n种类型（3）{
-webkit变换：旋转（0度）平移（0,0）；
变换：旋转（0度）平移（0,0）；
}
菜单：悬停{
-webkit变换：旋转（-180度）；
变换：旋转（-180度）；
转换延迟：0s；
}
菜单：鼠标悬停李{
过渡延迟：0.1s；
不透明度：1；
}
菜单：悬停li:n类型（1）{
-webkit变换：旋转（359度）平移（090px）；
变换：旋转（359度）平移（090px）；
}
菜单：悬停li:n类型（2）{
-webkit变换：旋转（310deg）平移（090px）；
变换：旋转（310deg）平移（090px）；
}
菜单：悬停li:n类型（3）{
-webkit变换：旋转（260度）平移（0，90像素）；
变换：旋转（260度）平移（0，90像素）；
}
李阿{
变换：旋转（180度）；
显示：块；
}

一,
二,
三,

这将解决您的旋转问题

li a {
  transform :rotate(180deg);
}

另外，如果您需要为

+

图标进行适当的圆形设计，则需要为

设置
宽度和
高度

  width: 30px;
  height: 70px;

这已经解决了你的旋转问题。请检查我的密码menu li i{
  content: "1";
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

menu li:nth-of-type(1) i {
  transform: rotate(180deg);
}

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

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

menu {
  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;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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 li li:nth-of-type(1) {
  -webkit-transform: rotate(180deg) translate(0, 0);
  transform: rotate(180deg) translate(0, 0);
  animation-name: crazy;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}

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

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

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 li i{
  content: "1";
  display: flex !important;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 100%;
}

menu li:nth-of-type(1) i {
  transform: rotate(180deg);
}

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

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

    <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>