html - 变换旋转菜单项圆形菜单

标签 html css css-animations

我修改了一个圆形菜单，我发现on this pen 但我在绕主圆旋转菜单项时遇到问题。默认情况下，这支笔的按钮底部垂直于它的相对位置，但由于我用字体图标更改了它们，它们看起来颠倒或 flex 。

我是 CSS 菜鸟，所以我需要一些帮助，已经花了几个小时了!

我尝试过以下几种方法:

menu li::after{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

或者类似的东西

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

它们似乎都不起作用。目前我的组件如下所示:

broken menu image icons upside down

这是我的完整 CSS 和 HTML...

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 li::after{
  transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
}

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 className="fas fa-bell"></i></li>
    <li><i className="fas fa-cog"></i></li>
    <li><i className="fas fa-terminal"></i></li>
</menu>-->

<menu>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</menu>

最佳答案

这已经解决了您的旋转问题。请检查我的代码。

我在每个 li 之后添加并在之后设置旋转，这是我添加的代码。

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);
}

这是 HTML

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

关于html - 变换旋转菜单项圆形菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56377438/

上一篇：javascript - 移除 DOM 元素时防止视口(viewport)移动

下一篇：javascript - 我需要让 JS 创建的页面显示父窗口中的一些代码

相关文章：

html - 弹出框箭头样式问题

javascript - 提交父 html 表单而不是子弹出表单？

javascript - 打印为pdf时如何将div分成2页？

javascript - 如何使用 Javascript 隐藏页面加载时的特定句子

html - Bootstrap 下拉列表错误地突出显示

javascript - 如何创建漂亮的文本深度\阴影效果？ (HTML)

html - 如何使 parent 高度与 child 相关，但当 child 高度增加时也不增加 parent 高度

css - 带有伪CSS的下划线菜单 anchor 动画

html - 为什么@keyframe 动画只工作一次？

css - 为什么第二次动态添加类到元素后动画不会重置并再次播放

©2024 IT工具网  联系我们