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