Hej, chciałabym by ruch środkowej lini w hamburgerze był wykonywany w prawo, a nie w lewo jak w tej chwili. Zmieniałam kod na różne sposoby, zmieniałam także kod na liczby ujemne i odwrotnie, ale zachowanie animacji hamburgera jest dla mnie nadal zagadką :/
Mógłby ktoś mi pomóc i powiedzieć co muszę zmienić by linia środowa uciekała w prawą stronę?
Pozdrawiam i z góry dziękuję :)
<div class="menu-btn">
<div class="menu-btn__burger"></div>
</div>
<!-- how look hamburger on css -->
.menu-btn__burger::before,
.menu-btn__burger::after {
margin-left: 10px;
}
.menu-btn {
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 80px;
height: 80px;
cursor: pointer;
transition: all .1s ease-in-out;
left: 250px;
}
.menu-btn__burger {
width: 50px;
height: 6px;
background: #181543;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .1s ease-in-out;
}
.menu-btn__burger::before,
.menu-btn__burger::after {
content: '';
position: absolute;
width: 50px;
height: 6px;
background: #181543;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
transition: all .1s ease-in-out;
}
.menu-btn__burger::before {
transform: translateY(-16px);
}
.menu-btn__burger::after {
transform: translateY(16px);
}
/* how hamburger are animation */
.menu-btn.open .menu-btn__burger {
transform: translateX(-50px);
background: transparent;
box-shadow: none;
}
.menu-btn.open .menu-btn__burger::before {
transform: rotate(45deg) translate(35px, -35px);
}
.menu-btn.open .menu-btn__burger::after {
transform: rotate(-45deg) translate(35px, 35px);
}
css