Функция scaleX

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

Синтаксис

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

Пример

При посочване на блока увеличаваме мащаба с 1.5 пъти по оста X:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleX(1.5);
}

Результат:

Пример

При посочване на блока намаляваме мащаба с 2 пъти по оста X:

html<div id="elem">lorem ipsum</div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: scaleX(0.5);
}

Результат:

Вижте също