тк 3 июля праздник (в беларуси), буду не онлайн (по возможности буду отвечать)

Функция scale

Функция scale масштабирует элемент: увеличивает или уменьшает его в несколько раз. Масштабирование осуществляется вокруг точки, задаваемой свойством transform-origin.

Может принимать один или два параметра, перечисляемых через запятую. Если параметров два - первый параметр задает масштабирование по горизонтали, а второй - по вертикали. Если параметр один то он задает масштабирование по горизонтали и вертикали одновременно.

Значением параметров служит целое или дробное число. Если оно больше 1 - элемент увеличивается, если меньше (например, 0.5) - элемент уменьшается. Если задать 1 - ничего не изменится (это и есть значение по умолчанию).

Синтаксис

селектор { transform: scale(одно или два числа); }

Пример

По наведению на блок увеличим масштаб в 1.5 раза по обеим осям:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1.5); }

:

Пример

Уменьшим масштаб в 2 раза по обеим осям:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(0.5); }

:

Пример

Увеличим масштаб в 2 раза по оси X:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(2, 1); }

:

Пример

Увеличим масштаб в 2 раза по оси Y:

<div id="elem">lorem ipsum</div> #elem { border: 1px solid black; width: 100px; height: 50px; } #elem:hover { transform: scale(1, 2); }

:

Смотрите также

  • функцию scaleX,
    которая задает масштабирование по оси X
  • функцию scaleY,
    которая задает масштабирование по оси Y