Свойство CSS Transform

translate()

Сдвигает элемент относительно исходного расположения на заданное значение по горизонтали и вертикали. В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Одно значение сдвигает элемент только по горизонтали, два значения сдвигают элемент по горизонтали и вертикали независимо. Значение 0 не меняет положение элемента.

transform: ( , );

div {
transform: (30px, 20%);
}

scale()

Сдвигает элемент относительно исходного расположения на заданное значение по горизонтали и вертикали. В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Одно значение сдвигает элемент только по горизонтали, два значения сдвигают элемент по горизонтали и вертикали независимо. Значение 0 не меняет положение элемента.

transform: ( , );

div {
transform: (0.9, 0.8);
}

rotate()

Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.

transform: ( , );

div {
transform: (5deg);
}

skew()

Наклоняет элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях.

transform: ( , );

div {
transform: (20deg, -4deg);
}

matrix()

Позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значения указываются в следуюзем порядке: scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()

transform: ( , , , , , );

div {
transform: (0.9, 0.1, -0.4, 0.8, 30, 10);
}