Функция scaleX

Функция scaleX масштабирует элемент по оси X. Масштабирование осуществляется вокруг точки, задаваемой свойством transform-origin. Значением функции служит целое или дробное число. Если оно больше 1 - элемент увеличивается, если меньше (например, 0.5) - элемент уменьшается. Если задать 1 - ничего не изменится (это и есть значение по умолчанию).

Синтаксис

селектор { transform: scaleX(число); }

Пример

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

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

:

Пример

По наведению на блок уменьшим масштаб в 2 раза по оси X:

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

:

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

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