Funktio scale

Funktio scale skaalaa elementtiä: suurentaa tai pienentää sitä useita kertoja. Skaalaus tapahtuu ympäri pisteen, joka määritetään ominaisuudella transform-origin.

Voi ottaa yhden tai kaksi parametria, jotka luetellaan pilkulla erotettuna. Jos parametreja on kaksi - ensimmäinen parametri määrittää skaalauksen vaakatasossa, ja toinen - pystytasossa. Jos parametri on yksi niin se määrittää skaalauksen vaaka- ja pystytasossa samanaikaisesti.

Parametrien arvona on kokonais- tai murtoluku. Jos se on suurempi kuin 1 - elementti suurenee, jos pienempi (esimerkiksi 0.5) - elementti pienenee. Jos asetetaan 1 - mikään ei muutu (tämä on oletusarvo).

Syntaksi

cssvalitsija {
  transform: scale(yksi tai kaksi numeroa);
}

Esimerkki

Kun kursorilla osoitetaan laatikkoa, suurennetaan mittakaavaa 1.5 kertaa molempia akseleita pitkin:

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

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

Результат:

Esimerkki

Pienennetään mittakaavaa 2 kertaa molempia akseleita pitkin:

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

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

Результат:

Esimerkki

Suurennetaan mittakaavaa 2 kertaa X-akselia pitkin:

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

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

Результат:

Esimerkki

Suurennetaan mittakaavaa 2 kertaa Y-akselia pitkin:

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

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

Результат:

Katso myös