Поддержка сайта

Высокие позиции в поисковой системе, на прямую зависят от развития вашего сайта.

Продвижение сайтов

Эффективность стратегий продвижения подтверждается сотрудничеством с крупными клиентами и отзывами о нашей работе.

Создание сайтов

Мы делаем сайты быстро, недорого и профессионально. От работы с нами, у вас останутся только положительные эмоции.

Масштабирование

.

Масштабирование

Функция scale (х, у) масштабирует элемент в указанной пропорции по горизонтали и вертикали соответственно. Если задан только один аргумент, преобразование по обеим осям произойдет с одинаковым коэффициентом. Это значит, что scale (1) оставит элемент неизменным, scale (2) увеличит его вдвое, scale (0.5) уменьшит вдвое и т. д.

Указав в качестве аргументов два разных значения, мы исказим его пропорции:

Масштабирование

Как и в случае с функцией translate, доступны функции scalex (х) и scaley (у). Они масштабируют элемент либо по горизонтальной оси, либо по вертикальной и означают то же самое, что и запись scale (х, 1) и scale (1, у) соответственно.

Элементы увеличиваются и уменьшаются относительно своего центра; иными словами, центр фигуры остается неподвижным, невзирая на изменение размеров по осям. Используя свойство transform-origin можно указать другую точку, которая будет центром преобразования. Мы поговорим об этом ниже.

Давайте добавим масштабирование к нашему элементу span:

Масштабирование

Масштабирование

Обратите внимание: нам не нужно объявлять новую трансформацию — мы просто указываем ее в списке функций, отделив от предыдущей пробелом.

Не будет лишним напомнить, что scale, как и translation, не влияет на общее строение документа; если размеры какого-либо элемента изменятся в результате ее применения, все окружающие элементы веб-страницы останутся на своих местах. Рисунок 8.3 иллюстрирует, что это может стать проблемой.

В подобных ситуациях надо отказаться от использования трансформирования и вместо этого варьировать значения таких параметров, как height, width и font-size. Последний способ изменяет размер пространства, отведенного браузером иод элемент.

Масштабирование

Рис. 8.3. Использование функции scale на строчных элементах может привести к нежелательным последствиям

В нашем случае, однако, мы как раз и хотим, чтобы текст видоизменялся, а все окружающие элементы оставались неподвижными, и функция scale отлично нам подходит. Что получилоось в результате наших трансформаций, видно из рис. 8.4.

Масштабирование

Рис. 8.4. Наш баннер теперь заметно выделяется

Выглядит неплохо, но нужно еще многое сделать.


.

Читайте так же:
Not found