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    

Elforgatás a Z tengely mentén



A transform tulajdonság segítségével a HTML elemek az Z tengely körül is elforgathatóak. Az elforgatás szögét kell csupán megadni.

Forgatás a Z tengely mentén:

kijelölő
{
transform
:
rotateZ(értékdeg);
}


1. Példa:

Forráskód



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

    .elem {
      ...
      position: absolute; }

    #rotateZ_1 .elem {
      -webkit-transform: rotateZ( 45deg );
         -moz-transform: rotateZ( 45deg );
           -o-transform: rotateZ( 45deg );
              transform: rotateZ( 45deg );}
    #rotateZ_2 .elem {
      -webkit-transform: rotateZ( -45deg );
         -moz-transform: rotateZ( -45deg );
           -o-transform: rotateZ( -45deg );
              transform: rotateZ( -45deg );}
   #rotateZ_3 .elem {
      -webkit-transform: rotateZ( -85deg );
         -moz-transform: rotateZ( -85deg );
           -o-transform: rotateZ( -85deg );
              transform: rotateZ( -85deg );}
</style>     
... 
<body>   

  <div id="rotateZ_1" class="tarolo">
    <div class="elem">rotateZ( 45deg )</div>
  </div>

  <div id="rotateZ_2" class="tarolo">
    <div class="elem">rotateZ( -45deg )</div>
  </div>
  <div id="rotateZ_3" class="tarolo">
    <div class="elem">rotateZ( -85deg )</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_rotateZ_01.html