Иногда возникает необходимость одновременно применить к элементу несколько трансформаций. Для того чтобы получить составное свойство transform, нужно всего лишь разделить функции пробелом.
Очень важно помнить о том, что порядок перечисления функций играет огромную роль. Некоторые функции передвигают точку отсчета и центр объекта, изменяя таким образом параметры, с которыми будут работать функции, перечисленные далее.
Листинг 3.24. Перемещение, масштабирование и поворот элемента: трансформации определяются в одной строке
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-transform: translateY(100px) rotate(45deg) scaleX(0.3); — webkit-transform: translateY(100px) rotate(45deg) scaleX(0.3);
}
Замените кодом из листинга 3.24 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.
Добавить комментарий