Несколько значений свойства transform
В качестве значений свойства transform
можно перечислить сразу несколько функций, разделив их пробелом. При этом к элементу последовательно будет применено несколько трансформаций. Пример:
transform: rotate(45deg) scale(1.2) skew(30deg, 0deg) translate(10px, 20px);
Порядок записи функций имеет значение. От перестановки значений может измениться конечный результат. В нашем примере элемент сначала поворачивается на 45 градусов в двухмерном пространстве, затем масштабируется, наклоняется и в конце перемещается. Если первой функцией записать, к примеру, skew()
, то элемент первым делом будет наклонен, после чего повернут на 45 градусов, масштабирован и перемещен:
Далее в учебнике: 3D-трансформации в CSS.