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