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 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