Сразу после создания элементы HTML подобны неподъемным и прочно закрепленным блокам. Конечно, их можно перемещать с помощью кода JavaScript или возможностей из некоторых популярных библиотек, таких как jQuery (http://www.jquery.com), однако до появления свойств transform и transition в CSS3 стандартной процедуры для этого не существовало.
Теперь не приходится задумываться, как это делать. Нужно всего лишь выучить несколько параметров, и вы сможете создавать потрясающе динамические веб-сайты, о которых раньше могли только мечтать. Свойство transform умеет выполнять четыре базовых трансформации объекта: масштабировать (функция scale), вращать (функция rotate), наклонять (функция skew) и перемещать или транслировать (функция translate). Давайте посмотрим, как это работает.
Листинг 3.19. Масштабирование поля заголовка
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-transform: scale(2);
-webkit-transform: scale(2);
}
В примере из листинга 3.19 мы взяли базовые стили, которые ранее создали для поля заголовка в листинге 3.2, и трансформировали их, увеличив размер элемента в два раза. Функция scale принимает два параметра: значение X для горизонтального масштабирования и значение Y — для вертикального. Если указано только одно значение, оно используется для обоих параметров.
Масштаб может быть описан как целым, так и дробным значением, а расчет масштабирования выполняется с помощью матрицы. Значения от 0 до 1 уменьшают размер элемента, значение 1 сохраняет исходные пропорции, а значения больше 1 пошагово увеличивают габариты объекта. Интересного эффекта позволяют добиться отрицательные значения параметров функции.
Листинг 3.20. Создание зеркального отображения с помощью функции scale
#mainbox {
Display: block; width: 500px; margin: 50px auto; padding: 15px; text-align: center; border: 1px solid #999999; background: #DDDDDD;
-moz-transform: scale(1,-1);
-webkit-transform: scale(1,-1);
}
В листинге 3.20 мы использовали два параметра для масштабирования элемента mainbox. Первое значение, равное 1, сохраняет исходные пропорции по горизонтали, а второе значение, равное -1, сохраняя исходные пропорции, инвертирует элемент по вертикали, создавая эффект зеркального отображения.
Существует еще две функции, аналогичные scale, но работающие только в одном измерении — либо по горизонтали, либо по вертикали. Эти функции, scaleX и scaleY, разумеется, принимают только один параметр.
Замените кодом из листингов 3.19 и 3.20 соответствующий код в листинге 3.11 и проверьте результат в своем браузере.
Добавить комментарий