Генератор CSS transform

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

1. Меняйте translate, rotate, scale и skew — карточка реагирует сразу, а пунктирный контур остаётся на исходном месте.
2. Выберите transform-origin — точку, вокруг которой элемент вращается и масштабируется; её отмечает красная точка.
3. Включите «3D», чтобы добавить rotateX, rotateY и perspective родителя.
4. Нажмите «Анимировать из none», чтобы увидеть переход от состояния без трансформации к вашему результату, затем — «Копировать».

Как это работает

Четыре функции 2D

translate(x, y) сдвигает элемент, rotate(угол) поворачивает по часовой стрелке, scale(x, y) растягивает или сжимает (scale(-1) зеркалит), skew(x, y) наклоняет. Трансформация меняет только отрисовку: исходное место элемента в потоке остаётся занятым, соседи не двигаются — это и показывает пунктирный контур. Проценты в translate считаются от размеров самого элемента, поэтому translate(-50%, -50%) — классический приём центрирования.

Порядок функций важен

Каждая функция работает в системе координат, уже изменённой предыдущими. translateX(100px) rotate(45deg) сначала сдвигает элемент на 100px вправо, затем поворачивает на месте. rotate(45deg) translateX(100px) сначала поворачивает оси, и элемент сдвигается на 100px вдоль наклонённой оси — по диагонали. Генератор пишет функции в фиксированном порядке: translate, rotateX, rotateY, rotate, scale, skew.

/* сдвиг вправо, затем поворот на месте */
transform: translateX(100px) rotate(45deg);

/* сначала поворот, затем сдвиг по диагонали */
transform: rotate(45deg) translateX(100px);

transform-origin: точка поворота

По умолчанию точка отсчёта — центр элемента (50% 50%). rotate и scale оставляют эту точку на месте, поэтому transform-origin: top left вращает элемент вокруг левого верхнего угла. Значение принимает ключевые слова, проценты и длины.

transform-origin: top left;
transform-origin: 20% 80%;

3D: perspective, rotateX и rotateY

rotateX наклоняет элемент вперёд или назад, rotateY поворачивает влево или вправо. Без perspective картинка плоская. Задайте perspective родителю: чем меньше значение, тем сильнее ощущение глубины. Тот же эффект можно получить внутри одного элемента функцией perspective() в начале списка transform.

.parent  { perspective: 600px; }
.element { transform: rotateX(25deg) rotateY(-20deg); }

Отдельные свойства translate, rotate, scale

Современные браузеры поддерживают translate, rotate и scale как самостоятельные свойства. Они применяются в порядке translate, rotate, scale, а затем transform, поэтому можно менять или анимировать одно из них, не переписывая весь список transform. Поддерживаются во всех основных браузерах с 2022 года.

.element {
  translate: 40px 20px;
  rotate: 15deg;
  scale: 1.1;
}

Частые вопросы