ფუნქცია 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);
}

Результат:

იხილეთ აგრეთვე