Transforms¶

Transforms — это свойства стиля, которые помогут вам изменить внешний вид и положение компонентов с помощью 2D- или 3D-трансформаций. Однако после применения трансформаций макеты остаются неизменными вокруг преобразованного компонента, поэтому он может накладываться на соседние компоненты. Чтобы предотвратить такое перекрытие, можно применить отступ к преобразованному компоненту, соседним компонентам или подкладку к контейнеру.

Пример¶

Методы¶

transform()¶

transform принимает массив объектов преобразования или разделенных пробелами строковых значений. Каждый объект указывает свойство, которое будет преобразовано в качестве ключа, и значение, которое будет использоваться в преобразовании. Объекты не должны объединяться. Используйте одну пару ключ/значение для каждого объекта.

Для преобразований rotate требуется строка, чтобы преобразование можно было выразить в градусах (deg) или радианах (rad). Например:

1
2
3
4

transform([
    { rotateX: '45deg' },
    { rotateZ: '0.785398rad' },
]);

Того же можно добиться и с помощью строки, разделенной пробелами:

1

transform('rotateX(45deg) rotateZ(0.785398rad)');

Для преобразований перекоса требуется строка, чтобы преобразование можно было выразить в градусах (deg). Например:

1

transform([{ skewX: '45deg' }]);

decomposedMatrix, rotation, scaleX, scaleY, transformMatrix, translateX, translateY¶

Комментарии