# Функция 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

←→
↑