-1

Не получается создать значок в форме X, как можно исправить?

.navbar__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 32px;
    width: 32px;
    transition: all 10s ease-in 0;
}

.hamburger__line {
    display: block;
    height: 2px;
    width: 16px;
    background-color: black;
    border-radius: 2px;
    transition: all 0.5s ease-in;
}

.navbar__hamburger:hover .hamburger__line:first-child {
    transform: rotate(-45deg);
}

.navbar__hamburger:hover .hamburger__line:nth-child(2) {
    transform: translateX(-50%);
    background: transparent;
}

.navbar__hamburger:hover .hamburger__line:last-child {
    transform: rotate(45deg);
}

1 ответ 1

0

Типа этого?

.navbar__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    height: 32px;
    width: 32px;
    transition: all 10s ease-in 0;
}

.hamburger__line {
    display: block;
    height: 2px;
    width: 32px;
    background-color: black;
    border-radius: 2px;
    transition: all 0.5s ease-in;
}

.navbar__hamburger:hover .hamburger__line:first-child {
    transform: translate3d(0, 4px, 0) rotate(-45deg);
}

.navbar__hamburger:hover .hamburger__line:nth-child(2) {
    background: transparent;
}

.navbar__hamburger:hover .hamburger__line:last-child {
   transform: translate3d(0, -4px, 0) rotate(45deg);
}
<div class="navbar__hamburger">
  <span class="hamburger__line"></span>
  <span class="hamburger__line"></span>
  <span class="hamburger__line"></span>
</div>

7
  • translate3d(0px, -4px, 0); а откуда 4px?
    – user536011
    23 мар в 12:39
  • @George что значит откуда? translate3d считает по трём направлениям (x,y,z), то есть горизонталь вертикаль и угол вроде как. Ну так вот я сдвинул на 4px по вертикали, чтобы ровно встали палочки и образовали крестик. 23 мар в 12:51
  • Все уже понял, спасибо
    – user536011
    23 мар в 12:55
  • @ЕвгенийЛи, честно говоря, из ваших слов ничего не понятно. У меня лично тоже вышло 4px, но у меня так получилось в результате сложения gap и height. Можете объяснить снова? В противоположном случае, не особо вижу логики в ваших действиях.
    – ΝNL993
    26 мар в 6:55
  • @ΝNL993 что значит не видите логики? Тут не нужна логика, просто сдвигаешь по вертикали и если нужно по горизонтали до тех пор, пока не получится красивый симметричный крестик. Панель разработчика есть в браузере для подгонки размеров. 27 мар в 4:46

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.