Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Трансформации/ Двумерные преобразования и координаты

КатегорияАнимации и трансформацииНавыкТрансформацииКомпонент навыка

Двумерные преобразования и координаты

БазовыйЭкспертный

Основано на спецификациях:
  1. Базовый уровень

    • Двумерное смещение

      Смещает геометрию по осям X и Y через translate-функции.

    • Двумерный масштаб

      Масштабирует геометрию независимо или равномерно по двум осям.

    • Плоское вращение

      Поворачивает геометрию в плоскости относительно текущей точки преобразования.

    • Наклон осей

      Создаёт двумерный наклон геометрии вдоль одной или обеих осей.

    • Список преобразований

      Комбинирует несколько transform-функций в одном значении.

    • Точка преобразования

      Задаёт точку, относительно которой выполняются вращение, масштабирование и другие преобразования.

    • Область отсчёта

      Выбирает reference box для origin и процентных координат преобразования.

  2. Продвинутый уровень

    • Порядок transform-функций

      Предсказывает итоговую геометрию с учётом некоммутативного порядка transform-функций.

    • Двумерная матрица

      Задаёт двумерное аффинное преобразование через `matrix()`.

    • Локальные координаты

      Интерпретирует геометрию элемента в его локальной системе координат.

    • Пользовательские координаты

      Различает локальную систему элемента и накопленное user space его окружения.

    • Координаты viewport

      Соотносит преобразованную геометрию с системой координат viewport.

    • Преобразованные границы

      Определяет осевой bounding rectangle преобразованной геометрии.

    • Transform overflow

      Учитывает, что преобразование может расширить scrollable overflow, но не сократить его относительно исходной геометрии.

    • Преобразованные client rects

      Соотносит возвращаемые клиентские прямоугольники с преобразованной геометрией элемента.

    • Transform hit testing

      Определяет область попадания после отображения геометрии через преобразование.

    • Transform containing block

      Учитывает containing block, создаваемый преобразованным элементом для абсолютных и фиксированных потомков.

    • Transform stacking context

      Учитывает stacking context, создаваемый ненулевым преобразованием, без предположений о compositor layer.

  3. Экспертный уровень

    • Матрицы transform-функций

      Представляет отдельные 2D transform-функции эквивалентными матрицами.

    • Current transformation matrix

      Строит CTM последовательным умножением матриц преобразований и origin translations.

    • Цепочка вложенных CTM

      Накапливает матрицы нескольких предков для отображения локальных координат во viewport.