VISSZA
MENÜ
TOVÁBBA 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 translateX() függvény pozitív érték esetén jobbra, negatív szám esetén balra tolhatja a HTML elemet.
Vízszintes eltolás beállítása:
kijelölő
{
transform
:
translateX(értékpx);
}
1. Példa:
Forráskód
<style>
.tarolo {
….
position: relative; }
.elem {
...
position: absolute; }
#translateX_1 .elem {
-webkit-transform: translateX( 50px );
-moz-transform: translateX( 50px );
-o-transform: translateX( 50px );
transform: translateX( 50px );
}
#translateX_2 .elem {
-webkit-transform: translateX( -50px );
-moz-transform: translateX( -50px );
-o-transform: translateX( -50px );
transform: translateX( -50px );
}
</style>
...
<body>
<div id="translateX_1" class="tarolo">
<div class="elem"> translateX( 50px ) </div>
</div>
<div id="translateX_2" class="tarolo">
<div class="elem"> translateX( -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_translateX_01.html