Свойство CSS transform

Свойство CSS transform позволяет визуально перемещать, масштабировать, поворачивать или искажать элемент, не влияя на окружающий макет. Это одно из свойств CSS3, которое принимает либо ключевое слово none, либо одну или несколько функций transform — например rotate(), scale(), translate() или skew().

Важно понимать: преобразование меняет способ отрисовки элемента, однако пространство, которое он первоначально занимал в потоке документа, остаётся прежним. Соседние элементы не перестраиваются при применении transform — именно поэтому трансформации дёшевы в анимации: браузер может делегировать их обработку GPU.

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

Информация

Трансформации применяются к трансформируемым элементам — блочным, flex-, grid- и inline-block-боксам, а также SVG-элементам. Они не применяются к незамещённым строчным элементам, таким как обычный <span> (сначала задайте ему display: inline-block).

В одном объявлении можно объединить несколько функций. Они применяются справа налево, то есть самая правая функция выполняется первой:

/* first rotate, then translate the rotated box */
transform: translate(10px, 40px) rotate(50deg);

Начальное значение	none
Применяется к	Трансформируемым элементам.
Наследуется	Нет.
Анимируемое	Да.
Версия	CSS3
DOM Syntax	Object.style.transform = "rotate(10deg)";

Синтаксис

Значения CSS transform

transform: none | transform-functions | initial | inherit;

Пример свойства transform:

Пример кода CSS transform

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 2px dashed #666;
        background-color: #8ebf42;
        transform: translate(10px, 40px) rotate(50deg);
        width: 130px;
        height: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <div>An element</div>
  </body>
</html>

Попробуйте сами »

Результат

Пример с несколькими функциями transform

Пример CSS transform с несколькими значениями

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        margin: 35px 20px;
      }
      div.box1 {
        width: 130px;
        height: 80px;
        border: 1px solid #000;
        background-color: #1c87c9;
        transform: rotate(30deg);
      }
      div.box2 {
        width: 120px;
        height: 80px;
        border: 1px solid #000;
        background-color: #8ebf42;
        transform: skewY(30deg);
      }
      div.box3 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FFFF00;
        transform: scaleY(1.5);
      }
      div.box4 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #ccc;
        transform: rotate(160deg);
      }
      div.box5 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #990099;
        transform: translateX(50px);
      }
      div.box6 {
        width: 160px;
        height: 80px;
        border: 1px solid #000;
        background-color: #FF0000;
        transform: skew(170deg, 170deg);
      }
    </style>
  </head>
  <body>
    <h2>Transform property example</h2>
    <h3>transform: rotate(30deg):</h3>
    <div class="box1"></div>
    <h3>transform: skewY(30deg):</h3>
    <div class="box2"></div>
    <h3>transform: scaleY(1.5):</h3>
    <div class="box3"></div>
    <h3>transform: rotate(160deg):</h3>
    <div class="box4"></div>
    <h3>transform: translateX(50px):</h3>
    <div class="box5"></div>
    <h3>transform: skew(170deg,170deg):</h3>
    <div class="box6"></div>
  </body>
</html>

Попробуйте сами »

Функции transform

translate()

translate(tx, ty) перемещает элемент по горизонтали и вертикали, не затрагивая другие элементы. tx — горизонтальное смещение, ty — вертикальное; положительное значение ty перемещает элемент вниз. Для смещения по одной оси используйте translateX() или translateY(). Поскольку translate() не вызывает перестройку макета, это предпочтительный способ перемещения элемента в анимациях:

transform: translate(50px, 20px); /* right 50px, down 20px */
transform: translateX(-30px);     /* left 30px */

scale()

scale(x, y) изменяет размер элемента относительно его текущего размера. 1 оставляет размер неизменным, 2 удваивает его, 0.5 уменьшает вдвое, а отрицательное значение отзеркаливает элемент. Передайте один аргумент, чтобы масштабировать обе оси одинаково:

transform: scale(1.5);   /* 150% in both directions */
transform: scale(2, 0.5);/* twice as wide, half as tall */

rotate()

rotate(angle) вращает элемент вокруг его точки трансформации. Положительный угол соответствует вращению по часовой стрелке, отрицательный — против часовой. Угол задаётся в deg, rad, grad или turn:

transform: rotate(45deg);
transform: rotate(-0.25turn); /* same as rotate(-90deg) */

skew()

skew(ax, ay) наклоняет (скашивает) элемент вдоль осей x и y. skewX() и skewY() скашивают по одной оси. Значение 0deg оставляет ось без изменений:

transform: skewX(20deg);
transform: skew(20deg, 10deg);

matrix()

matrix(a, b, c, d, e, f) объединяет все 2D-трансформации — масштабирование, скос, поворот и перемещение — в одну функцию. Обычно её не пишут вручную; браузеры вычисляют её внутренне, и именно в этом виде она отображается при чтении вычисленных стилей.

transform-origin

По умолчанию каждая трансформация выполняется относительно центра элемента. Свойство transform-origin изменяет эту точку опоры, что существенно влияет на результат rotate() или scale(). Например, transform-origin: top left заставляет rotate(45deg) поворачивать элемент вокруг его левого верхнего угла, а не вокруг центра.

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

Описанные выше функции работают в 2D-плоскости. Их трёхмерные аналоги — translateZ(), rotateX(), rotateY(), rotate3d() и другие — перемещают и поворачивают элементы вдоль оси z (к зрителю или от него). 3D-трансформации выглядят объёмными только при наличии perspective у самого элемента или его родителя; без перспективы rotateY() просто сжимает элемент по горизонтали.

Анимация трансформаций

Свойство transform поддерживает анимацию, поэтому оно является основным инструментом плавного движения интерфейса. Сочетайте его с transition для эффектов при наведении или с animation и ключевыми кадрами для непрерывного движения:

.card {
  transition: transform 0.3s ease;
}
.card:hover {
  transform: scale(1.05) translateY(-4px);
}

Значения

Значение	Описание	Пример
none	Трансформация не применяется.	Попробовать »
translate()	Перемещает элемент на вектор [tx, ty]. Tx — смещение по оси x. Ty — смещение по оси y.	Попробовать »
translateX()	Перемещает элемент вдоль оси x.	Попробовать »
translateY()	Перемещает элемент вдоль оси y.	Попробовать »
scale(x, y)	Увеличивает или уменьшает элемент.	Попробовать »
scaleX()	Масштабирует элемент вдоль оси x.	Попробовать »
scaleY()	Масштабирует элемент вдоль оси y.	Попробовать »
rotate(angle)	Вращает элемент в двумерном пространстве. Угол задаётся в параметре.	Попробовать »
skew()	Задаёт 2D-скос вдоль оси x и оси y.	Попробовать »
skewX()	Задаёт 2D-скос вдоль оси x.	Попробовать »
skewY()	Задаёт 2D-скос вдоль оси y.	Попробовать »
matrix()	Задаёт 2D-трансформацию с помощью матрицы из шести значений.	Попробовать »
translateZ()	Перемещает элемент на заданную величину вдоль оси z.
translate3d()	Задаёт трёхмерное перемещение.
scaleZ()	Масштабирует элемент в третьем измерении — вдоль оси z.
scale3d()	Задаёт трёхмерное масштабирование.
rotateX()	Вращает элемент вокруг оси x в трёхмерном пространстве.	Попробовать »
rotateY()	Вращает элемент вокруг оси y в трёхмерном пространстве.	Попробовать »
rotateZ()	Вращает элемент вокруг оси z в трёхмерном пространстве.	Попробовать »
rotate3d()	Задаёт трёхмерный поворот.
matrix3d()	Задаёт 3D-трансформацию с помощью матрицы 4×4 из 16 значений.
perspective()	Задаёт перспективу для трёхмерного элемента.
initial	Устанавливает значение свойства по умолчанию.
inherit	Наследует значение свойства от родительского элемента.

Практика

Какое утверждение о свойстве transform является неверным?

Оно может применяться к трансформируемым элементам.Свойство transform позволяет поворачивать, масштабировать, скашивать или перемещать элемент.Оно задаёт только двумерное преобразование элемента.