Генератор CSS transform

Генерируйте значения CSS transform: сдвиг, поворот, масштаб, наклон, а также 3D-перспективу, повороты по осям X и Y и сдвиг по Z, с точкой трансформации.

Пресеты

2D-трансформации

Сдвиг по Xpx

Сдвиг по Ypx

Поворотdeg

Масштаб X

Масштаб Y

Наклон Xdeg

Наклон Ydeg

3D-трансформации

Перспективаpx

Поворот по X (наклон)deg

Поворот по Y (разворот)deg

Сдвиг по Z (глубина)px

Перспектива 0 — без перспективы. Без неё 3D-повороты выглядят плоскими.

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

Положение X%

Положение Y%

Предпросмотр

Пунктир показывает элемент до трансформации, красная точка — точку трансформации (transform-origin).

CSS-код

transform: none;

Что такое Генератор CSS transform?

Комбинирует функции CSS transform с помощью ползунков: 2D translate, rotate, scale и skew, а также 3D perspective, rotateX, rotateY и translateZ. Пунктирный контур в предпросмотре показывает исходное положение, а красная точка отмечает начало трансформации.

Как пользоваться Генератор CSS transform

Выберите пресет (3D tilt, Flip, Slanted, Zoom, 3D card) или начните с None.
В разделе 2D настройте сдвиг по X/Y, поворот, масштаб по X/Y и наклон по X/Y.
В разделе 3D задайте перспективу, поворот по X и Y и сдвиг по Z.
Выберите точку трансформации (transform-origin) из списка или задайте положение по X/Y.
Скопируйте CSS-код.

Пример

Ввод

Move X 20px, Rotate 45°, Scale X 1.5, Scale Y 1.5

Вывод

transform: translate(20px, 0) rotate(45deg) scale(1.5);

Одинаковый масштаб по X и Y сокращён до одного значения scale(1.5).

Когда использовать Генератор CSS transform

Подходит для эффектов наведения, переворота карточек, наклонных 3D-витрин и точных смещений. Transform не влияет на вёрстку (соседние элементы не сдвигаются); чтобы изменить вёрстку, используйте отступы, flexbox или grid. Сочетайте с генератором CSS-анимаций, чтобы анимировать переходы между трансформациями.

Как работает Генератор CSS transform

Функции записываются только если они не нейтральны, в таком порядке: perspective(), translate(), translateZ(), rotateX(), rotateY(), rotate(), scale(), skew(). Трансформации применяются справа налево относительно элемента, поэтому порядок меняет результат; perspective() должна стоять первой, чтобы влиять на следующие за ней 3D-функции. Одинаковый масштаб по X/Y записывается одним scale(n). transform-origin выводится только если отличается от центра по умолчанию (50% 50%).