За что отвечает CSS transform scale

Что проверяют

Понимаете ли вы, что scale меняет только отрисовку, а не раскладку, и чем трансформация отличается от изменения width и height. Следом спрашивают про transform-origin, про эффект на :hover и почему его лучше делать через transform.

Как отвечать

• синтаксис: transform: scale(1.5) масштабирует по обеим осям, scale(2, 0.5) по X и Y отдельно, есть scaleX(), scaleY() и scale3d(). Значение это множитель: 1.5 означает полтора исходных размера, то есть плюс 50%;
• отрицательные значения: scaleX(-1) зеркалит элемент по горизонтали, так переворачивают иконки-стрелки;
• точка отсчёта: по умолчанию transform-origin: 50% 50%, элемент растёт от центра. Чтобы рос от левого края, задают transform-origin: left center;
• раскладка: элемент занимает в потоке исходное место, соседи не двигаются, увеличенный блок просто перекрывает их. offsetWidth вернёт исходный размер, getBoundingClientRect() отмасштабированный;
• отдельное свойство scale: в современных браузерах можно писать scale: 1.5 без transform. Удобно, когда в transform уже лежит сдвиг для позиционирования и перезаписывать его на :hover не хочется.

Главный практический аргумент: анимация transform и opacity не пересчитывает раскладку, браузер может выполнять её в композиторе. Анимация width и height запускает layout на каждом кадре. Отсюда типовой приём: transition: transform .2s и scale(1.05) при наведении, а для тех, кто отключил анимации в системе, эффект убирают через @media (prefers-reduced-motion: reduce).

Где спотыкаются

Утверждают, что scale сдвигает соседние элементы. Не сдвигает, поэтому увеличенные карточки наезжают на соседей и обрезаются контейнером с overflow: hidden.

Применяют transform к строчному span и удивляются, что ничего не происходит. На обычные строчные элементы трансформации не действуют, нужен inline-block или block.

Не знают побочных эффектов: любой transform, кроме none, создаёт новый контекст наложения и становится содержащим блоком для потомков с position: fixed. Модальное окно внутри такого родителя позиционируется от него, а не от окна браузера.