This page is being translated; the original is shown (Русский ).
Точка трансформации
Классы origin-* задают transform-origin — точку, которая остаётся на месте
при повороте, масштабе и наклоне. По умолчанию это центр элемента. Берите
классы, когда элемент должен поворачиваться вокруг угла или раскрываться от
своего края, как выпадающее меню от кнопки.
Пример
Поворот
Все образцы повёрнуты на 15° (rotate-15); пунктир — место без поворота.
Подпись — класс точки: угол или сторона, которые остаются на месте.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-col-1 sm:grid-col-3 gap-4 items-center" >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-top-inline-start" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-top-inline-start</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-top" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-top</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-top-inline-end" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-top-inline-end</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-inline-start" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-inline-start</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-center" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-center</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-inline-end" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-inline-end</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-bottom-inline-start" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-bottom-inline-start</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-bottom" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-bottom</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary opacity-8 rotate-15 origin-bottom-inline-end" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-bottom-inline-end</code >
</div >
</div >
Масштаб
Образцы уменьшены (scale-1/4) к разным точкам.
HTML wrap_text Wrap source lines content_copy Copy
<div class ="flex flex-wrap gap-4 items-end" >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-1/4 origin-top-inline-start" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-top-inline-start</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-1/4 origin-center" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-center</code >
</div >
<div class ="flex flex-col gap-2 items-center" >
<div class ="w-d8 h-d8 radius-ui border border-dashed border-outline" >
<div class ="w-full h-full radius-ui bg-primary-container border border-primary scale-1/4 origin-bottom-inline-end" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >origin-bottom-inline-end</code >
</div >
</div >
Классы
Класс
CSS
Значения
origin-centertransform-origin: center—
origin-toptransform-origin: top—
origin-top-inline-endtransform-origin: top right—
origin-inline-endtransform-origin: right—
origin-bottom-inline-endtransform-origin: bottom right—
origin-bottomtransform-origin: bottom—
origin-bottom-inline-starttransform-origin: bottom left—
origin-inline-starttransform-origin: left—
origin-top-inline-starttransform-origin: top left—
Условия (что это ): ширина экрана — нет; состояния — нет.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Выбор точки
Класс
Точка
origin-centerцентр — значение по умолчанию
origin-top, origin-bottomсередина верхней или нижней стороны
origin-inline-start, origin-inline-endсередина левой или правой стороны
origin-top-inline-start, origin-top-inline-endверхний левый или правый угол
origin-bottom-inline-start, origin-bottom-inline-endнижний левый или правый угол
Меню, которое раскрывается от кнопки
Меню под кнопкой масштабируют от верхней стороны, чтобы оно росло вниз от
кнопки, а не из своего центра:
HTML wrap_text Wrap source lines content_copy Copy
<div class ="origin-top transition-transform scale-1/2" >…</div >
Ограничения
Классы inline-start и inline-end задают физические стороны: left и
right. При письме справа налево они не меняются местами.
Точка сама по себе ничего не двигает — она нужна вместе с классами
поворота, масштаба или наклона.
У семейства нет префиксов ширины экрана и состояния.
См. также
Предыдущая Преобразования Следующая Вращение
