Как перевести ширину в проценты css?
Естественно, что не будет выглядеть.
Проценты они ведь такие - считаются от разных значений у разных свойств (у margin-top - от ширины родителя, у translateX - от ширины блока, к которому применяете translate).
Так что тут арифметикой здравый смысл не победишь. 
Если хотите пропорционально смасштабировать, проще использовать препроцессор и замену)
Естественно, что не будет выглядеть.
Проценты они ведь такие - считаются от разных значений у разных свойств (у margin-top - от ширины родителя, у translateX - от ширины блока, к которому применяете translate).
Так что тут арифметикой здравый смысл не победишь. 
Если хотите пропорционально смасштабировать, проще использовать препроцессор и замену)