Scale funksiýasy

scale funksiýasy elementi ölçegleýär: ony birnäçe esse uly ýa-da kiçi edýär. Ölçegleme transform-origin aýratynlygy bilen kesgitlenen nokada esaslanýar.

Bir ýa-da iki parametri kabul edip bilýär, olar vergül bilen biri-birinden aýrylýar. Eger iki parametr bolsa - birinji parametr gorizontal boýunça ölçeglemäni kesgitleýär, ikinjisi bolsa vertikal boýunça. Eger bir parametr bolsa, ol gorizontal we vertikal boýunça birwagtda ölçeglemäni kesgitleýär.

Parametrleriň bahasy bitin ýa-da bölek san bolup biler. Eger ol 1-den uly bolsa - element ulyar, eger kiçi bolsa (mysal üçin, 0.5) - element kiçelýär. Eger 1 kesgitlense - hiç zat üýtgemeýär (bu ýagdaýynda deslapky baha).

Sintaksis

cssselektor {
  transform: scale(bir ýa-da iki san);
}

Mysal

Blokyň üstüne gelende ölçegi iki ekseniň boýunça hem 1.5 esse uly edeliň:

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

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

Результат:

Mysal

Ölçegi iki ekseniň boýunça hem 2 esse kiçi edeliň:

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

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

Результат:

Mysal

Ölçegi X ekseni boýunça 2 esse uly edeliň:

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

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

Результат:

Mysal

Ölçegi Y ekseni boýunça 2 esse uly edeliň:

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

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

Результат:

Şeýle-de görmeli