CSS Transform

Что такое CSS transform?

CSS трансформации нужны, чтобы сдвигать, поворачивать, масштабировать элементы и делать другие вещи! Значения CSS Transform:

Translate (x, y)

Сдвигает элемент на новое место, перемещая относительно изначального положения объекта вправо и вниз, используя координаты X и Y. Записывается следующим образом translate (x,y). Но элемент из структуры не вырывается.

div{
  transform: translate(10px, 50%);
}

Scale (x, y)

Увеличивает или уменьшает элементы

div{
  transform: scale(1, 2);
}

Rotate (n + deg)

Поворачивает элементы по часовой стрелке.

div{
  transform: rotate(90deg)
}

Skew (x + deg, y + deg)

Деформирует (наклоняет) элементы.

div{
  transform: skew(10deg,50deg)
}

Общее свойство transform (2D)

Позволяет объединить несколько функций трансформаций в одной.

div{
  transform: translate(30px, 90px) rotate(90deg) scale(1.8);
}

Transform-origin

Позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента.

div{
  transform-origin:top left;
}

Perspective, perspective-origin

Установка глубины и смена точки начала координат.

div{
  perspective: 500px;
  perspective-origin: 0 0;
}

Translate3d (x, y, z), Scale3d (x, y, z), Rotate3d (x, y, z, deg)

Повторяют функционал своих 2-d свойств. Помимо оси X и Y добавляется ось Z.

div{
  transform: translate3d(0px, 0px, 0px); 
  transform: rotate3d(1, 1, 1, 30deg); 
  transform: scale3d(1, 2, 1.5); 
}

Общее свойство transform (3D)

Позволяет объединить несколько 3-D функций в одной.

div{
  transform: translate3d(300px, 0px, 10px) rotate3d(1,1,1,90deg); 
}

Transform-style

Определяет, как дочерние элементы должны отображаться в 3D-пространстве.

div{
  transform-style:flat; по-умолчанию
  или 
  transform-style:preserve-3d; 
}

Backface-visibility

Отображение обратной стороны объекта.

div{
  backface-visibility: visible; по-умолчанию
  или
  backface-visibility: hidden;
}

Ссылка на подробную статью: https://developer.mozilla.org/ru/docs/Web/CSS/transform

Генератор 3D матриц: http://ds-overdesign.com/transform/matrix3d.html