Vízszintes és függőleges átméretezés

A CSS3 lehetővé teszi a HTML elemek átméretezését (skálázását) x, y vagy z irányba a transform tulajdonság segítségével.

A scale() függvénnyel vízszintesen és függőlegesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.

Vízszintes és függőleges skálázás beállítása:

kijelölő

{

transform

scale(érték, érték);

}

Az 1-nél kisebb érték csökkenti, az 1-nél nagyobb érték növeli az elem méretét.

1. Példa:

Forráskód


<style>
    .tarolo {
     ….
      position: relative; }
    .elem {
      ...
      position: absolute; }
    #scale_1 .elem {
      -webkit-transform: scale( 1.2, 0.8 );
         -moz-transform: scale( 1.2, 0.8 );
           -o-transform: scale( 1.2, 0.8 );
              transform: scale( 1.2, 0.8 );
    }    
    #scale_2 .elem {
      -webkit-transform: scale( 0.8, 1.2  );
         -moz-transform: scale( 0.8, 1.2  );
           -o-transform: scale( 0.8, 1.2  );
              transform: scale( 0.8, 1.2  );
    }
</style>     
... 
<body>   
  <div id="scale_1" class="tarolo">
    <div class="elem"> scale( 1.2, 0.8 )</div>
  </div>
  <div id="scale_2" class="tarolo">
    <div class="elem"> scale( 0.8, 1.2 ) </div>
  </div>  
</body>

Eredmény*

* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css3_scaleXY_01.html