Спросите помощника

0/400

Вопрос обрабатывается ИИ-сервисом и сохраняется для улучшения ответов. Не вводите персональные данные.

Transform

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

Тип: 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 ), а не меняйте значения рывками.