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: revert;
transform: revert-layer;
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:

CSS Transform 3D:

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

<!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>