Перейти к содержанию

transform

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

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

Синтаксис

/* Keyword values */
transform: none;

/* Function values */
transform: matrix(1, 2, 3, 4, 5, 6);
transform: translate(12px, 50%);
transform: translateX(2em);
transform: translateY(3in);
transform: scale(2, 0.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: rotate(0.5turn);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);
transform: matrix3d(
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16
);
transform: translate3d(12px, 50%, 3em);
transform: translateZ(2px);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleZ(0.3);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: perspective(17px);

/* Multiple function values */
transform: translateX(10px) rotate(10deg) translateY(5px);

/* Global values */
transform: inherit;
transform: initial;
transform: unset;

Значения

<функция>
Функция трансформации.
none
Отменяет действие трансформации.

Функции трансформации

matrix()
Задаёт двумерную матрицу преобразований.
matrix3d()
Задаёт трёхмерную матрицу преобразований.
rotate()
Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
rotate3d()
Поворачивает элемент в трёхмерном пространстве.
rotateX()
Поворачивает элемент на заданный угол относительно оси X.
rotateY()
Поворачивает элемент на заданный угол относительно оси Y.
rotateZ()
Поворачивает элемента на заданный угол относительно оси Z.
scale()
Масштабирует элемент по горизонтали и вертикали. Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.
scale3d()
Масштабирует элемент в трёхмерном пространстве.
scaleX()
Масштабирует элемент по горизонтали.
scaleY()
Масштабирует элемент по вертикали.
scaleZ()
Масштабирует элемент по оси Z.
skewX()
Наклоняет элемент на заданный угол по вертикали.
skewY()
Наклоняет элемент на заданный угол по горизонтали.
translate()
Сдвигает элемент на заданное значение по горизонтали и вертикали.
translate3d()
Сдвигает элемент на заданное значение в трёхмерном пространстве.
translateX()
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
translateY()
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
translateZ()
Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает назад, отрицательное вперёд.
perspective()
Задаёт перспективу.

Примечание

  • Internet Explorer 9 поддерживает свойство -ms-transform.
  • Chrome до версии 36 и Android до версии 4 поддерживают свойство -webkit-transform.
  • Safari поддерживает свойство -webkit-transform.
  • Opera до версии 12.10 и с версии 15 до 23 поддерживает свойство -o-transform.
  • Firefox до версии 16 поддерживает свойство -moz-transform.

Значение по-умолчанию: none

Применяется к трансформируемым элементам

Спецификации

Поддержка браузерами

CSS Transform 2D:

Can I Use transforms2d? Data on support for the transforms2d feature across the major browsers from caniuse.com.

CSS Transform 3D:

Can I Use transforms3d? Data on support for the transforms3d feature across the major browsers from caniuse.com.

Описание и примеры

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>transform</title>
    <style>
      .turn:hover {
        transform: rotate(15deg);
      }
    </style>
  </head>
  <body>
    <p>
      <img src="image/igels.png" alt="Ёжик" class="turn" />
      <img src="image/igels.png" alt="Ёжик" class="turn" />
    </p>
  </body>
</html>