Реклама мешает? Идти Без рекламы Сегодня 

Генератор CSS Transform

РазработчикМатематика

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Предустановленные преобразования

Предустановленный

2D Transform

Вращение (град): 0

Масштаб X: 10

Масштаб Y: 10

Наклон X (град): 0

Наклон Y (град): 0

Перенос X (px): 0

Перенос Y (px): 0

3D Transform

Вращение X (град): 0

Вращение Y (град): 0

Вращение Z (град): 0

Перспектива (px): 800

Точка трансформации

Использовать пользовательскую точку

Точка X (%): 50

Точка Y (%): 50

Параметры

Включить вендорные префиксы

Предпросмотр анимации

ВЫХОД

Клиентская сторона

Живой просмотр

Трансформация

Сгенерированный CSS

Реклама · УДАЛИТЬ?

Гид

Генератор CSS Transform

Визуально создавайте CSS-свойства transform с предварительным просмотром в реальном времени. Настройте ползунки 2D и 3D transform для вращения, масштабирования, наклона, смещения и перспективы, затем скопируйте сгенерированный CSS. Включает сетку выбора transform-origin, переключатель предварительного просмотра анимации и предустановки в один клик для распространенных эффектов, таких как перевороты и наклоны.

Как использовать

Перетаскивайте ползунки, чтобы настроить каждое свойство transform, и наблюдайте, как эффект применяется к элементу предварительного просмотра в реальном времени. Используйте раздел 2D для rotate, scale, skew и translate. Переключитесь в раздел 3D для rotateX, rotateY, rotateZ и perspective. Нажмите на любую ячейку в сетке transform-origin, чтобы изменить центр вращения. Попробуйте предустановки для быстрых эффектов или переключите предварительный просмотр анимации, чтобы увидеть, как transform анимируется в цикле. Скопируйте сгенерированный CSS, когда будете удовлетворены результатом.

Возможности

Живой визуальный предварительный просмотр – Мгновенно наблюдайте за применением transform к демонстрационному элементу при настройке ползунков
2D Transform – Вращение, масштабирование X/Y, наклон X/Y и смещение X/Y с точным управлением ползунками
3D Transform – RotateX, rotateY, rotateZ и perspective для эффектов глубины
Сетка Transform-Origin – Визуальный выбор 3x3 для установки точки центра вращения, а также пользовательские процентные поля ввода
Предустановки – Эффекты в один клик: Горизонтальный переворот, Вертикальный переворот, Наклон влево, Наклон вправо, 3D-переворот карты, Вылет
Предпросмотр анимации – Переключатель для плавной анимации transform в цикле с помощью CSS-переходов
Чистый вывод CSS – Объединенная строка transform с transform-origin и необязательными префиксами поставщика
Сбросить всё – Верните все ползунки к значениям по умолчанию одним кликом

Реклама · УДАЛИТЬ?

 Часто задаваемые вопросы

В чем разница между 2D и 3D CSS-преобразованиями?

2D-преобразования работают только по осям X и Y, влияя на ширину и высоту. Они включают вращение, масштабирование, наклон и перенос. 3D-преобразования добавляют ось Z для глубины, позволяя элементам вращаться в трехмерном пространстве. Такие свойства, как rotateX и rotateY, наклоняют элементы к зрителю или от него. Для 3D-преобразований требуется значение перспективы на родительском элементе или самом элементе для создания иллюзии глубины. Без перспективы 3D-вращения выглядят плоскими. Как 2D, так и 3D-преобразования могут быть объединены в одном свойстве transform.
Что делает transform-origin?

Transform-origin устанавливает точку, вокруг которой применяются преобразования. По умолчанию это центр элемента (50% 50%). Изменение его на верхний левый угол (0% 0%) заставляет вращения вращаться вокруг угла, а не центра. Это кардинально меняет вид вращения, масштабирования и наклона. Например, вращение на 45 градусов от центра вращает элемент на месте, но вращение от верхнего левого угла раскачивает его, как дверь. Точка происхождения принимает ключевые слова (top, center, bottom, left, right), проценты или пиксельные значения для точного контроля.
Как работает CSS-перспектива?

Перспектива определяет расстояние между зрителем и плоскостью Z, создавая иллюзию глубины для 3D-преобразований. Меньшее значение, такое как 200px, создает экстремальную перспективу крупным планом, где 3D-эффекты выглядят драматично и искаженно. Большее значение, такое как 2000px, создает тонкую, удаленную перспективу. Перспективу можно установить на родительском элементе как свойство (perspective: 800px) или на самом элементе как функцию преобразования (transform: perspective(800px)). Метод родителя предпочтителен, когда несколько дочерних элементов находятся в одном 3D-пространстве.
Нужны ли мне еще вендорные префиксы для CSS-преобразований?

В 2026 году вендорные префиксы для CSS-преобразований редко требуются. Непрефиксированное свойство transform поддерживается во всех современных браузерах, включая Chrome, Firefox, Safari, Edge и мобильные браузеры. Префикс -webkit-transform требовался для старых версий Safari и iOS до Safari 9 (2015). Если вам нужно поддерживать очень старые браузеры, этот генератор может включить вендорные префиксы в виде комментария в выводе. Для большинства проектов, ориентированных на текущие браузеры, непрефиксированная версия достаточна, и код без префиксов чище.