Свойство CSS Transform

translate()

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

transform: ( );

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

translateX()

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

transform: ( );

div {
transform: (30px);
}

translateY()

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

transform: ( );

div {
transform: (30px);
}

scale()

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

transform: ( );

div {
transform: (0.9, 0.8);
}

scaleX()

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

transform: ( );

div {
transform: (0.9);
}

scaleY()

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

transform: ( );

div {
transform: (0.8);
}

rotate()

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

transform: ( );

div {
transform: (5deg);
}

rotateZ()

Функция rotateZ(), позволяет вращать элемент по оси Z. Работает также как и функция rotate(), элемент вращается как колесо

transform: ( );

div {
transform: (5deg);
}

rotateX()

Функция rotateX(), позволяет вращать элемент по оси X. Элемент вращается по вертикали

transform: ( );

div {
transform: (35deg);
}

rotateY()

Функция rotateY(), позволяет вращать элемент по оси Y. Элемент вращается по горизонтали

transform: ( );

div {
transform: (35deg);
}

perspective()

Функция perspective(), определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умолчанию располагается в центре элемента и может быть изменена с помощью свойства perspective-origin. В качестве значения указывается расстояние от плоскости монитора до точки сходимости линий. Нулевое или отрицательное значение отменяет действие перспективы. Чем меньше значение, тем более выраженной выглядит перспектива и наоборот.

transform: ( px) ( deg);

div {
transform: (150px) rotateX(45deg);
}

skew()

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

transform: ( );

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

skewX()

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

transform: ( );

div {
transform: (20deg);
}

skewY()

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

transform: ( );

div {
transform: (8deg);
}

matrix()

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

transform: ( , , , , , );

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