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

3D 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 translate3d() függvény segítségével egy lépésben megadhatók az eltolás x, y és z irányú összetevőinek értékei.

3D eltolás beállítása egy lépésben:

kijelölő
{
transform
:
translate3d(értékpx);
}


1. Példa:

Forráskód



<style>
    .tarolo {
     ….
      position: relative; }
    .elem {
      ...
      position: absolute; }
    #translate3d_1 .elem {
      -webkit-transform: translate3d( -20px, -20px, -20px );
         -moz-transform: translate3d( -20px, -20px, -20px );
           -o-transform: translate3d( -20px, -20px, -20px );
              transform: translate3d( -20px, -20px, -20px );
    }
    #translate3d_2 .elem {
      -webkit-transform: translate3d( 20px, 20px, 20px );
         -moz-transform: translate3d( 20px, 20px, 20px );
           -o-transform: translate3d( 20px, 20px, 20px );
              transform: translate3d( 20px, 20px, 20px );
    }
</style>     
... 
<body>   
  <div id="translate3d_1" class="tarolo">
    <div class="elem"> -20px, -20px, -20px </div>
  </div>
  <div id="translate3d_2" class="tarolo">
    <div class="elem"> 20px, 20px, 20px </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_translate3D_01.html

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