logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

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 scaleY() függvénnyel függőlegesen nyújthatjuk vagy zsugoríthatjuk a HTML elemet.

Vízszintes skálázás beállítása:

kijelölő
{
transform
:
scaleY(é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; } #scaleY_1 .elem { -webkit-transform: scaleY( 0.8 ); -moz-transform: scaleY( 0.8 ); -o-transform: scaleY( 0.8 ); transform: scaleY( 0.8 ); } #scaleY_2 .elem { -webkit-transform: scaleY( 1.2 ); -moz-transform: scaleY( 1.2 ); -o-transform: scaleY( 1.2 ); transform: scaleY( 1.2 ); } </style> ... <body> <div id="scaleY_1" class="tarolo"> <div class="elem"> scaleY( 0.8 )</div> </div> <div id="scaleY_2" class="tarolo"> <div class="elem"> scaleY( 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_scaleY_01.html


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.