burger

Исходный код

В первом случае минус явно лишний!

4-е слишком мало!

А если без вращений??

Минус и плюс меняем местами!

Дальше череда событий, которая ни к чему не привела, я сдаюсь.

Нет, сделаю еще одну попытку!

Хочется все удалить, и начать с чистого листа, но я мне придется то же самое написать!

Лишние линии скрываем! Чтобы не отвлекали. Оставляем только две!

Убрать вращения!

Нужно сделать линии чуть длиннее! Но я уже так делал, они потом уедут, куда не стоит ехать! Сразу это предвижу!

Так, шикарно! Я понял, что раньше я делал неправильно. Но уже не буду возвращаться! У меня новая идея и я ей следую!

Если нужно обьяснять, зачем удлинять линии, то это та самая геометрия! Гипотенуза же!

Пора добавить вращения! Тут я уже не по методу тыка работаю!

Ну чуть-чуть по методу тыка, куда же без него! Там оказалось transform-origin лучше местами поменять))

Проверю на анимацию! Добавлю scale!

Пока не буду тебе показывать результат(

Анимируется, но что-то нужно сделать

Я закрою глаза на мелкие погрешности!🙈

Осталось сделать то же самое и с двумя другими линиями!

Я проебал минус!

Минус должен быть в другом месте!

Ура! Идем дальше! Вернем трансформации!

Крестик есть, но мне не нравится скачек при раскрытии!

Верхняя и нижняя линии одинаковой длинны Я проверил в фотошопе!!

А как я сделал квадратный крестик??

Размер лучше не менять!

А зачем я все в процентах задаю?? В вообще переменные не буду использовать!

О! Я понял еще одну хрень, что я не учел!, супер!