Анимация меню гамбургера, вызывая растущий лейбл «контейнер» ⇐ Html

[Anonymous]

Я пытаюсь создать меню гамбургера. У меня есть большая часть механики, но я борюсь с анимациями за три строки, превращающиеся в «X». Когда я поворачиваю верхнюю и нижнюю линию и меняю ширину, линии движутся вправо. Из того, что я могу сказать, ширина метки «контейнера» получает ширину двух линий, хотя при вращении они должны соответствовать метке «контейнер» без его растущего. Есть идеи, как заставить его не стать более широким? То есть, если он шире высокого, то высота будет ограничивающим фактором. < /P>
Включенный код показывает, что происходит. Я увеличил все и замедлил таймер, чтобы упростить следование. class = "Snippet-Code-CSS Lang-CSS PrettyPrint-override">

Код: Выделить всё

:root
{
--bar-width: 240px;
--bar-height: 40px;
--hamburger-gap: 40px;
--hamburger-height: calc((var(--bar-height) * 3) + (var(--hamburger-gap) * 2));
--time: 1s;
}

body
{
margin: 20px;
}

.hamburger-menu
{
--x-width: calc(var(--hamburger-height) * sqrt(2));
/* --x-width : calc(sqrt(2) * min(var(--hamburger-height), var(--bar-width))); */

outline: 5px solid black;
display: flex;
flex-direction: column;
gap: var(--hamburger-gap);
width: max-content;
/* align-items: center; */
cursor: pointer;
background-color: gray;
}

.hamburger-menu::before,
.hamburger-menu::after,
.hamburger-menu input
{
content: "";
width: var(--bar-width);
height: var(--bar-height);
background-color: cyan;
border-radius: 9999px;
margin: auto;
transform-origin: center center;
}

.hamburger-menu input
{
background-color: red;
appearance: none;
pointer-events: none;
}

.hamburger-menu::before,
.hamburger-menu::after
{
transition: width var(--time) ease-in-out,
rotate var(--time) ease-in-out,
translate var(--time) ease-in-out var(--time);
}

.hamburger-menu:has(input:checked)::before,
.hamburger-menu:has(input:checked)::after
{
transition: width var(--time) ease-in-out var(--time),
rotate var(--time) ease-in-out var(--time),
translate var(--time) ease-in-out;
}

.hamburger-menu:has(input:checked)::before
{
width: var(--x-width);
rotate: 45deg;
translate: 0 calc((var(--hamburger-height) - var(--bar-height)) / 2);
}

.hamburger-menu:has(input:checked)::after
{
width: var(--x-width);
rotate: -45deg;
translate: 0 calc((var(--hamburger-height) - var(--bar-height)) / -2);
}< /code>





Hamburger Menu Test

Подробнее здесь: https://stackoverflow.com/questions/796 ... er-to-grow