This page is being translated; the original is shown (Русский ).
Вращение
Классы rotate-* поворачивают элемент по часовой стрелке на заданное число
градусов. Берите их для стрелок и шевронов, которые меняют направление, для
наклонных меток и для лёгкой «небрежности» карточек.
Пример
Шкала
Пунктир — место элемента без поворота. Поворот идёт вокруг центра; подпись —
класс.
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 rotate-0" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-0</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 rotate-1" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-1</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 rotate-2" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-2</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 rotate-3" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-3</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 rotate-5" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-5</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 rotate-15" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-15</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 rotate-45" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-45</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 rotate-90" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-90</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 rotate-180" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >rotate-180</code >
</div >
</div >
При наведении
Префикс hover: поворачивает элемент, пока над ним указатель. Наведите
указатель на образцы; плавность даёт класс transition-transform.
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 transition-transform hover:rotate-15 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:rotate-15</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 transition-transform hover:rotate-45 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:rotate-45</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 transition-transform hover:rotate-90 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:rotate-90</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 transition-transform hover:rotate-180 cursor-pointer" ></div >
</div >
<code class ="text-1/2 color-on-surface-variant" >hover:rotate-180</code >
</div >
</div >
Классы
Класс
CSS
Значения
rotate-0transform: rotate(0deg)—
rotate-1transform: rotate(1deg)—
rotate-2transform: rotate(2deg)—
rotate-3transform: rotate(3deg)—
rotate-5transform: rotate(5deg)—
rotate-15transform: rotate(15deg)—
rotate-45transform: rotate(45deg)—
rotate-90transform: rotate(90deg)—
rotate-180transform: rotate(180deg)—
Условия (что это ): ширина экрана — нет; состояния — hover:. Например: hover:rotate-0.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Выбор угла
Мелкие углы rotate-1 … rotate-5 дают лёгкий наклон, rotate-15 и
rotate-45 — заметный, rotate-90 и rotate-180 разворачивают значок.
Число в имени класса — угол в градусах.
Стрелка, которая разворачивается
Шеврон раскрывающегося блока поворачивают при наведении или классом,
который ставит скрипт:
HTML wrap_text Wrap source lines content_copy Copy
<span class ="sf-icon transition-transform hover:rotate-180" aria-hidden ="true" >expand_more</span >
Точку, вокруг которой идёт поворот, задают классы
точки трансформации .
Ограничения
Классы поворота, масштаба, наклона и смещения задают одно свойство
transform целиком, поэтому на одном элементе действует только один из
них: rotate-45 scale-2 не повернёт и не увеличит элемент одновременно.
Сочетаются только смещения по x и y между собой.
Трансформация не меняет раскладку: соседние элементы остаются на местах, а
увеличенный или повёрнутый элемент может перекрыть их.
Отрицательных углов нет: поворот против часовой стрелки задают в стилях
проекта.
Из префиксов есть только hover:; префиксов ширины экрана нет.
См. также
Предыдущая Точка трансформации Следующая Масштабирование
