Image Image Image Image Image Image Image Image Image Image

Блог Indigo | 02.05.2024

Наверх

Наверх

Несколько значений свойства transform

В качестве значений свойства transform можно перечислить сразу несколько функций, разделив их пробелом. При этом к элементу последовательно будет применено несколько трансформаций. Пример:

transform: rotate(45deg) scale(1.2) skew(30deg, 0deg) translate(10px, 20px);

Порядок записи функций имеет значение. От перестановки значений может измениться конечный результат. В нашем примере элемент сначала поворачивается на 45 градусов в двухмерном пространстве, затем масштабируется, наклоняется и в конце перемещается. Если первой функцией записать, к примеру, skew(), то элемент первым делом будет наклонен, после чего повернут на 45 градусов, масштабирован и перемещен:

Несколько значений CSS3 transform
Перестановка значений может влиять на результат

Далее в учебнике: 3D-трансформации в CSS.