VISSZA
MENÜ
TOVÁBBA CSS3 lehetővé teszi a HTML elemek megdöntését (ferdíthetését) x irányba a transform tulajdonság segítségével.
A skewX() függvénnyel adhatjuk meg a megdöntés szögét, az x tengely mentén deg-ben.
Vízszintes döntés beállítása:
kijelölő
{
transform
:
skewX(értékdeg);
}
1. Példa:
Forráskód
<style>
.tarolo {
….
position: relative; }
.elem {
...
position: absolute; }
#skewX_1 .elem {
-webkit-transform: skewX( 20deg );
-moz-transform: skewX( 20deg );
-o-transform: skewX( 20deg );
transform: skewX( 20deg );
}
#skewX_2 .elem {
-webkit-transform: skewX( -20deg );
-moz-transform: skewX( -20deg );
-o-transform: skewX( -20deg );
transform: skewX( -20deg );
}
</style>
...
<body>
<div id="skewX_1" class="tarolo">
<div class="elem"> skewX( 20deg )</div>
</div>
<div id="skewX_2" class="tarolo">
<div class="elem"> skewX( -20deg ) </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_skewX_01.html