CSS transform — синтаксис и примеры
CSS-свойство transform: назначение, рабочее значение, влияние на раскладку или отрисовку, ошибки и поддержка браузерами.
Суть темы
Назначение «transform» раскрывается через задачу «изменять визуальное положение или переход между состояниями интерфейса». Применяет геометрическое преобразование после расчёта раскладки. Для воспроизводимой проверки «transform» используйте пример в каталоге с динамической длиной текста и наблюдайте размер содержащего блока в Layout.
Проверяя «transform», соблюдайте правило: проверяйте transform вместе с родительским контекстом и соседними правилами. Для «transform» изменяйте одно условие за запуск и фиксируйте фактический результат.
Синтаксис transform
Пример «transform» оставляет только контекст, необходимый для области «движение и преобразования». Измените одно значение и проследите результат в браузере.
.demo {
transform: translateY(-0.25rem);
}Как работает transform
Браузер обрабатывает «transform» в контексте области «движение и преобразования»: применяет геометрическое преобразование после расчёта раскладки. Для «transform» наблюдения через размер содержащего блока в Layout и момент загрузки ресурса в Network отделяют исходное условие от результата.
Проверка в проекте
- Проверьте transform-origin, область клика и соседние элементы; результат относится непосредственно к «transform».
- Проверить Chrome, Firefox и Safari для новой или экспериментальной возможности при разборе «transform».
- Проверьте «transform» в каталоге с динамической длиной текста через размер содержащего блока в Layout и запишите наблюдаемое изменение.
Оставляйте «transform» в решении только после проверки в каталоге с динамической длиной текста. Если нативная конструкция решает задачу «transform» с меньшим числом условий, используйте её.
Практика с transform
Проверьте «transform» в тестовом шаблоне с длинным текстом, клавиатурным управлением и узким экраном. Отдельная проверка для «transform»: проверьте transform-origin, область клика и соседние элементы.
Сценарий: в каталоге с динамической длиной текста.
Ошибки при работе с transform
Устойчивость
Визуальное перемещение не освобождает и не занимает новое место в потоке — это предметный риск для «transform».
Доступность
Смешивание данных, оформления и поведения в одной хрупкой конструкции при использовании «transform».
Каскад
Скрытие фокуса без равноценной заметной замены; для «transform» проверьте это отдельно.
Поддержка transform
Для «transform» таблица собрана из закреплённой версии MDN Browser Compatibility Data. Указанная версия браузера показывает первое заявленное появление базовой поддержки «transform»; окончательное решение принимайте по аудитории конкретного проекта.
Спецификация: источник 1, источник 2, источник 3.
Вопросы о transform
Как понять, что «transform» выбрано правильно?
«transform» выбрано правильно, когда оно решает задачу «изменять визуальное положение или переход между состояниями интерфейса», сохраняет результат в каталоге с динамической длиной текста и проходит предметную проверку: проверьте transform-origin, область клика и соседние элементы.
Нужен ли запасной вариант для «transform»?
Запасной вариант для «transform» нужен, если целевой браузер или режим не обеспечивает выбранное поведение. Без улучшения «transform» должно сохранять смысл, содержимое и основное действие.
Спецификации и источники
Синтаксис и статус проверяются по HTML Living Standard, спецификациям CSS и MDN Browser Compatibility Data. Примеры и объяснения подготовлены для этого сервиса.