CSS-свойство transform

CSS-свойство transform преобразует элемент в 2D или 3D пространстве применяя к нему различные эффекты, такие как translate, rotate, scale и т. д.

Значение по умолчанию:	`none`
Применяется к:	Трансформируемые элементы
Наследование:	Нет
Анимирование:	Да. Анимируемые свойства
Версия:	Новый в CSS3

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

transform: [ transform-function ] 1 or more values | none | initial | inherit

Примеры написания кода свойства transform:

img {
    -webkit-transform: translate(200px, 50px);  /* Chrome, Safari, Opera */
       -moz-transform: translate(200px, 50px);  /* Firefox */
        -ms-transform: translate(200px, 50px);  /* IE 9 */
            transform: translate(200px, 50px);  /* Standard syntax */    
}

Значения свойств

В следующей таблице описаны значения этого свойства.

Значение	Описание
`translate(tx,ty)`	Перемещает элемент на заданную величину вдоль оси X и Y.
`translate3d(tx,ty,tz)`	Перемещает элемент на заданную величину вдоль X, Y & Z-оси.
`translateX(tx)`	Перемещает элемент на заданную величину вдоль оси X.
`translateY(ty)`	Перемещает элемент на заданную величину вдоль оси Y.
`translateZ(tz)`	Перемещает элемент на заданную величину вдоль оси Z.
`rotate(a)`	Поворачивает элемент на указанный угол вокруг источника элемента, определеного свойством `transform-origin`.
`rotate3d(x,y,z, a)`	Поворот элемента в трехмерном пространстве вокруг вектора направления [x, y, z] на угол, указанный в последнем параметре.
`rotateX(a)`	Поворот элемента на заданный угол вокруг оси X.
`rotateY(a)`	Поворот элемента на заданный угол вокруг оси Y.
`rotateZ(a)`	Поворот элемента на заданный угол вокруг оси Z.
`scale(sx,sy)`	Масштабирует элемент на заданную величину по осям X, Y. Функция `scale (1,1)` не имеет эффекта.
`scale3d(sx,sy,sz)`	Масштабирует элемент на заданную величину по осям X, Y и Z. Функция `scale3d(1,1,1)` не имеет эффекта.
`scaleX(sx)`	Масштабирует элемент вдоль оси X.
`scaleY(sy)`	Масштабирует элемент вдоль оси Y.
`scaleZ(sz)`	Масштабирует элемент вдоль оси Z.
`skew(ax,ay)`	Наклоняет элемент на заданный угол по оси X и Y.
`skewX(ax)`	Наклоняет элемент на заданный угол вдоль оси X.
`skewY(ay)`	Наклоняет элемент на заданный угол вдоль оси Y.
`matrix(n,n,n,n,n,n)`	Определяет двумерное преобразование в форме матрицы преобразования, состоящей из шести значений.
`matrix(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)`	Определяет трехмерное преобразование в форме матрицы преобразования 4×4 из 16 значений.
`perspective(length)`	Определяет вид в перспективе для трехмерного преобразованного элемента. Когда значение этого свойства увеличивается, элемент будет появляться дальше от зрителя.
`none`	Указывает, что преобразование не должно применяться.
`initial`	Устанавливает это свойство в значение по умолчанию.
`inherit`	Если указан, связанный элемент принимает вычисленное значение своего родительского элемента `transform`.