WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Függőleges döntés



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