Функция 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);
}
: