Генератор трансформаций CSS
Создайте объявление CSS transform, объединяющее translate, rotate, scale и skew в один готовый к использованию shorthand.
Ввод
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-transform-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"translateX": "10",
"translateY": "20",
"rotate": "45",
"scaleX": "1.5",
"scaleY": "1.5",
"skewX": "0",
"skewY": "0"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-transform-generator` tool (CSS Transform Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-transform-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор трансформаций CSS — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что это делает
Генератор трансформаций CSS объединяет значения translate, rotate, scale и skew в одно готовое к использованию объявление transform:. Отрегулируйте ползунки и числовые поля, и созданный CSS будет обновляться мгновенно — не нужно вручную писать синтаксис функции или запоминать порядок, который ожидает CSS.
Функции трансформации
Объявление CSS transform представляет собой разделённый пробелами список функций, каждая из которых изменяет элемент по-разному:
translate(x, y)— перемещает элемент по горизонтали и вертикали в пикселях. Положительное X сдвигает вправо, положительное Y сдвигает вниз.rotate(deg)— вращает элемент по часовой стрелке вокруг его начала (центра по умолчанию). Отрицательные значения вращают против часовой стрелки.scale(x, y)— изменяет размер элемента по каждой оси.1— исходный размер,2— удваивает,0.5— сокращает вдвое, отрицательное значение отражает элемент по этой оси.skew(x, y)— наклоняет элемент по каждой оси в градусах, создавая искажение, похожее на параллелограмм, часто используется для стилизованных заголовков или эффектов карточек.
Порядок функций имеет значение
Браузеры применяют функции трансформации в порядке их написания, каждая работает с системой координат, оставленной предыдущей функцией. Этот инструмент всегда записывает их в фиксированном порядке — translate, rotate, scale, skew — что является наиболее предсказуемым порядком для объединения смещения, поворота и масштабирования без влияния одной функции на другую. Если вам нужен другой порядок композиции для конкретного эффекта, переупорядочьте функции вручную после копирования CSS.
Чтобы сохранить результат чистым, функция включается только если она действительно что-то меняет: translate(0px, 0px), rotate(0deg), scale(1, 1) и skew(0deg, 0deg) — это всё пустые операции, поэтому они опускаются. Если все значения установлены по умолчанию, инструмент выводит transform: none;.
Как использовать
- Установите Сдвиг X и Сдвиг Y для перемещения элемента в пикселях.
- Перетащите Поворот для вращения в градусах (-360 до 360).
- Установите Масштаб X и Масштаб Y для изменения размера —
1сохраняет исходный размер. - Перетащите Наклон X и Наклон Y для наклона в градусах.
- Скопируйте созданное объявление
transformиз вывода кода и вставьте его в вашу таблицу стилей.
Часто задаваемые вопросы
Почему scale — это обычное число, а не процент?
Функция CSS scale() использует безразмерный множитель, а не процент — 1.5 означает 150% от исходного размера, 0.5 означает 50%. Соответствие чистому синтаксису CSS означает, что вы можете вставить результат непосредственно без преобразования.
Могу ли я анимировать трансформацию, созданную с помощью этого инструмента?
Да — transform является частым целью для свойств CSS transition/animation. Добавьте рядом правило transition: transform 0.3s ease; (на базовое состояние или :hover) для анимации между значениями.
Изменяется ли визуальный результат от порядка translate/rotate/scale/skew?
Да. Поскольку каждая функция работает с системой координат, оставленной предыдущей функцией, translate() а затем rotate() производит другой результат, чем rotate() а затем translate(). Этот инструмент использует фиксированный, предсказуемый порядок; отредактируйте скопированный CSS вручную, если вам нужна другая композиция.
Хранит или загружает ли этот инструмент что-нибудь? Нет. Все расчёты выполняются локально в вашем браузере — ваши значения никогда не покидают ваше устройство.