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

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

Свойства transform: scaleX и transform: scaleY масштабируют элемент по горизонтали и по вертикали соответственно.

Обратите внимание на то, что при любых трансформациях transform, другие элементы будут вести себя так, будто мы не трансформировали элемент, и он даже может налезть на другие.

Синтаксис

селектор {
	transform: scale(масштаб по оси X и Y) или scale(число1, число2);
}
селектор {
	transform: scaleX(число);
}
селектор {
	transform: scaleY(число);
}

Значения

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

Значение по умолчанию: 1.

Примеры

Пример

Вот так блок выглядит без масштабирования (или со значением scale(1)):

#elem {
	-o-transform: scale(1);
	-ms-transform: scale(1);
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример

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

#elem {
	-o-transform: scale(1.5);
	-ms-transform: scale(1.5);
	-moz-transform: scale(1.5);
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример

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

#elem {
	-o-transform: scale(2, 1);
	-ms-transform: scale(2, 1);
	-moz-transform: scale(2, 1);
	-webkit-transform: scale(2, 1);
	transform: scale(2, 1);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!

Пример

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

#elem {
	-o-transform: scale(1, 2);
	-ms-transform: scale(1, 2);
	-moz-transform: scale(1, 2);
	-webkit-transform: scale(1, 2);
	transform: scale(1, 2);
	border: 1px solid black;
	width: 100px;
	height: 50px;
}

Результат выполнения кода:

Привет, мир!