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 translateY() függvény pozitív érték esetén lefelé, negatív szám esetén felfelé tolhatja a HTML elemet.
Közelítés-távolítás beállítása:
kijelölő
{
transform
:
translateZ(értékpx);
}
1. Példa:
Forráskód
<style>
.tarolo {
….
position: relative; }
.elem {
...
position: absolute; }
#translateY_1 .elem {
-webkit-transform: translateZ( -100px );
-moz-transform: translateZ( -100px );
-o-transform: translateZ( -100px );
transform: translateZ( -100px );
}
#translateY_2 .elem {
-webkit-transform: translateZ( 100px );
-moz-transform: translateZ( 100px );
-o-transform: translateZ( 100px );
transform: translateZ( 100px );
}
</style>
...
<body>
<div id="translateZ_1" class="tarolo">
<div class="elem"> translateZ( -100px ) </div>
</div>
<div id="translateZ_2" class="tarolo">
<div class="elem"> translateZ( 100px ) </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_translateZ_01.html