Függőleges eltolás - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

Függőleges eltolás

A CSS3 lehetővé teszi a HTML elemek eltolását (helyzetének módosítását) x, y vagy z irányba a transform tulajdonság segítségével.

A translateY() függvény pozitív érték esetén lefelé, negatív szám esetén felfelé tolhatja a HTML elemet.

Függőleges eltolás beállítása:

kijelölő

{

transform

translateY(értékpx);

}

1. Példa:

Forráskód


<style>
    .tarolo {
     ….
      position: relative; }
 

    .elem {
      ...
      position: absolute; }
    #translateY_1 .elem {
      -webkit-transform: translateY( -50px );
         -moz-transform: translateY( -50px );
           -o-transform: translateY( -50px );
              transform: translateY( -50px );
    }
    #translateY_2 .elem {
      -webkit-transform: translateY( 50px );
         -moz-transform: translateY( 50px );
           -o-transform: translateY( 50px );
              transform: translateY( 50px );
    }
</style>     
... 
<body>   
  <div id="translateY_1" class="tarolo">
    <div class="elem"> translateY( -50px ) </div>
  </div>
  <div id="translateY_2" class="tarolo">
    <div class="elem"> translateY( 50px ) </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_translateY_01.html