Transform Rotate Пункт меню Круглое меню - PullRequest
Новая
       11

Transform Rotate Пункт меню Круглое меню

2 голосов
/ 30 мая 2019

Я изменил круговое меню, которое нашел на этой ручке Но у меня возникают проблемы с вращением пунктов меню вокруг основного круга. По умолчанию этого пера нижняя часть кнопки перпендикулярна ее относительному положению, но, поскольку я изменил их с помощью значков шрифтов, они выглядят перевернутыми или изогнутыми.

Я новичок в 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 {
  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>

РЕДАКТИРОВАТЬ: Я не знаю, почему кнопка выглядит как эллипс в фрагменте кода, но давайте проигнорируем это ради этого аргумента. В моем приложении это выглядит нормально :) 1030 *

Ответы [ 3 ]

2 голосов
/ 30 мая 2019

Это исправило вашу проблему с вращением. пожалуйста, проверьте мой код.

Я добавил после каждого 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>
0 голосов
/ 30 мая 2019

Это исправит вашу проблему с вращением. 

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

Также, если вам нужен правильный круговой дизайн для иконки +, вам нужно исправить width и height для .menu класса в CSS следующим образом: 

  width: 30px;
  height: 70px;
0 голосов
/ 30 мая 2019 

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: 30px;
  height: 70px;
  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);
}
li a {
  transform :rotate(180deg);
  display:block;
}
<menu>
  <li><a>1</a></li>
    <li><a>2</a></li>
    <li><a>3</a></li>
</menu>

оберните содержимое списка в элемент блока или встроенный элемент, как я! и поверните этот элемент на 180 градусов!

...