Miten luoda: skaalautuminen silmukassa

Opeta, miten käyttää CSS:ää skaalata elementtejä silmukassa.

Skaalautuminen silmukassa

Kuivaa hiiren osoittimen viereen vihreään ruutuun:

Miten skaalata silmukassa

<style>
.zoom {
  sisennys: 50px;
  taustaväri: vihreä;
  transition: muotoilu .2s; /* Animaatio */
  leveys: 200px;
  korkeus: 200px;
  margin: 0 auto;
}
.zoom:hover {
  transform: skaala 1.5; /* (150% skaalaus - huomaa: jos skaalaus on liian suuri, se voi ylittää näyttöalueen) */
}
</style>
<div class="zoom"></div>

Kokeile itse

Liittyvät sivut

Oppitunnit:CSS muunnos