Свойство CSS Transform
translate()
Сдвигает элемент относительно исходного расположения на заданное значение по горизонтали и вертикали. В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Одно значение сдвигает элемент только по горизонтали, два значения сдвигают элемент по горизонтали и вертикали независимо. Значение 0 не меняет положение элемента.
transform: (30px, 20%);
}
scale()
Сдвигает элемент относительно исходного расположения на заданное значение по горизонтали и вертикали. В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. Одно значение сдвигает элемент только по горизонтали, два значения сдвигают элемент по горизонтали и вертикали независимо. Значение 0 не меняет положение элемента.
transform: (0.9, 0.8);
}
rotate()
Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством transform-origin (en-US), не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется точечным отражением.
transform: (5deg);
}
skew()
Наклоняет элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях.
transform: (20deg, -4deg);
}
matrix()
Позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значения указываются в следуюзем порядке: scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()
transform: (0.9, 0.1, -0.4, 0.8, 30, 10);
}