Есть класс-css с такими полями, не могу понять, что здесь делает строчка transform
что она задает ?
position: absolute;
width: 1140px;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуСмещает блок на 50% от ширины и высоты блока по оси x и по оси y , центрирует объект по центру этот код.
top
и left
смещает сам блок на 50%. А transform: translate
смещает этот блок относительно ширины и высоты этого блока. Скажем у вас div высотой 200px и шириной 200px , написав transform: translate(-50%,-50%)
вы сместите сам блок на 100px влево и на 100px вверх. Ровно на половину от ширины и высоты самого блока. Таким образом блок станет по центру в данном случае.