HTML5 + CSS3 logó
  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    

A transzformáció középpontja



A transzformáció középpontja alapértelmezetten a HTML elem középpontjával esik egybe, de ettől eltérhetünk a transform-origin tulajdonság felhasználásával

A vízszintes és függőleges döntés beállítása:

kijelölő
{
transform-origin
:
érték érték;
}

A helyzet megadható %-os értékben, hosszmértékben. Az értékek sorrendben: x y. Alapértelmezett érték: transform-origin(50%, 50%)

Használható kulcsszavak:


Vízszintes irányban: left, center, right
Függőleges irányban: top, center, bottom
A térbeli transzformációknál meg kell adni 3 paraméterként a z értékét is. Ehhez kulcsszavak nem használhatók.

1. Példa:

Forráskód



<style>
    .tarolo {
     ….
      position: relative; }

    .elem {
      ...
      -webkit-transform: rotateZ( 45deg );
         -moz-transform: rotateZ( 45deg );
           -o-transform: rotateZ( 45deg );
              transform: rotateZ( 45deg );    
      position: absolute; }

    #transform_origin_1 .elem {
      -webkit-transform-origin:right top;
         -moz-transform-origin:right top;
           -o-transform-origin:right top;
              transform-origin:right top;             
    }
    #transform_origin_2 .elem {
      -webkit-transform-origin:20% 40%;
         -moz-transform-origin:20% 40%;
           -o-transform-origin:20% 40%;
              transform-origin:20% 40%;                
                
    }    
   #transform_origin_3 .elem {
      -webkit-transform-origin:left bottom;
         -moz-transform-origin:left bottom;
           -o-transform-origin:left bottom;
              transform-origin:left bottom;    
    }
</style>     
... 
<body>   

  <div id="transform_origin_1" class="tarolo">
    <div class="elem"> right top;</div>
  </div>

  <div id="transform_origin_2" class="tarolo">
    <div class="elem"> 20% 40%; </div>
  </div>


  <div id="transform_origin_3" class="tarolo">
    <div class="elem"> left bottom; </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_transform_origin_02.html