Ask the assistant

0/400

Your question is processed by an AI service and kept to improve answers. Do not enter personal data.

Transform

This page has not been translated into English yet. The Russian original is below.

Применяет к ребёнку геометрическое преобразование: поворот, масштаб, сдвиг, отражение — и повороты в третьем измерении. Преобразование рисуется поверх раскладки: место, которое ребёнок занимает в родителе, не меняется .

Тип: single-child

Transform rotate:0.785
  SizedBox width:80 height:80
    ColoredBox color:#4f46e5

Параметры

Все преобразования можно задавать вместе. Они складываются в одну матрицу в фиксированном порядке : сдвиг, перспектива, rotateX , rotateY , rotate , масштаб, отражение. В приложении и на сайте порядок один и тот же, так что Transform rotate:0.5 scale:2 значит одно и то же.

Параметр	Тип	Default	Описание
`translateX`	double	—	Сдвиг по горизонтали, пиксели
`translateY`	double	—	Сдвиг по вертикали, пиксели
`translateZ`	double	—	Глубина вдоль взгляда, пиксели: положительное — к зрителю
`rotate`	double	—	Поворот в плоскости, в радианах ( `3.14159` — пол-оборота)
`scale`	double	—	Равномерный масштаб
`scaleX`	double	—	Масштаб по горизонтали (если нет `scale` )
`scaleY`	double	—	Масштаб по вертикали (если нет `scale` )
`flipX`	bool	false	Отразить по горизонтали
`flipY`	bool	false	Отразить по вертикали
`perspective`	double	—	Расстояние до зрителя, пиксели, для `rotateX` / `rotateY` : чем меньше, тем сильнее глубина (600–1200 — обычная карточка). Без него объёмный поворот просто сплющивает
`rotateX`	double	—	Поворот вокруг горизонтальной оси, радианы: верхний край уходит от зрителя или к нему
`rotateY`	double	—	Поворот вокруг вертикальной оси, радианы: карточка поворачивается как дверь
`backface`	bool	true	Рисовать ли ребёнка, когда он повёрнут к зрителю спиной (более 90° по X или Y). `false` скрывает обратную сторону
`alignment`	string	center	Точка, вокруг которой идёт преобразование: `center` , `topLeft` , `bottomRight` и т. д.
`filterQuality`	string	—	Качество перерисовки при масштабировании (только приложение)

Вложенные структуры

`#origin`

Смещение точки преобразования от выбранного alignment , в пикселях.

Transform rotate:0.3 alignment:topLeft
  #origin x:10 y:5
  SizedBox width:80 height:80
    ColoredBox color:#7c3aed

Примеры

Масштаб и сдвиг

Transform translateX:20 translateY:10 scale:1.2
  Text "Сдвинут и увеличен"

Отражение

Transform flipX:true
  Text "Зеркально"

Карточка, повёрнутая от зрителя

Transform perspective:800 rotateY:0.4
  SizedBox width:160 height:100
    ColoredBox color:#36345E

Поворот вокруг угла

Transform rotate:-0.2 alignment:bottomLeft
  SizedBox width:120 height:60
    ColoredBox color:#059669

Различия между приложением и сайтом

Порядок преобразований одинаков.
filterQuality на сайте не читается.
Объёмные повороты ( perspective , rotateX , rotateY , translateZ ) зависят от движка браузера. Проверяйте результат в настоящем браузере, а не только по снимку страницы.

Best practices

Радианы, не градусы. Градусы в радианы: градусы × 3.14159 / 180 .
Раскладка не двигается. Сдвинутый Transform рисуется в новом месте, но занимает старое: соседние элементы его не обходят. Для настоящего смещения в раскладке берите Padding или Align .
Для плавного движения оборачивайте в анимацию (см. Animation ), а не меняйте значения рывками.