Почему здесь используется свойство transform: translate?

Question

[HitGirl]

Здравствуйте!
Есть следующий css-селектор:

#mobile-menu {
    position: absolute;
    top: 20%;
    right: 5%;
    transform: translate(5%, 20%);
  }

Подскажите, пожалуйста, зачем здесь свойство transform: translate, почему элемент нужно сдвигать?
Сайт тут.

Comments

[Kovalsky]

Ссылка неправильная же, ведёт на гитхаб

Answer 1

[Владислав Лысков]

автор так сделал что бы разместить бургер по центру

Answer 2

[dicem]

Translate используется для сдвига по X и Y относительно сдвигаемого объекта, запихните разметку с CSS в JSFIDDLE или CodePen и посмотрите какой это дает эффект. Получается так, что вы просто хотите, чтоб это сделали за вас.

Comments

[Kovalsky]

Я думаю человека интересует зачем translate используется одновременно с явным позиционированием top+right

[HitGirl]

Я вообще не понимаю, что это за приём. В чём тут фишка? Высота контейнера 80px, высота бургера 29px. Считаем отступ сверху: 0.2*80+0.2*29=16+6=22px. Внизу: 80 - 29 -22 = 29px Выглядит по-центру, но если увеличить высоту контейнера всё собьётся.
Почему, бы просто не использовать код ниже:

top: 50%;
    right: 5%;
    transform: translate(0, -50%);