Elforgatás az 3D tengely mentén

A transform tulajdonság segítségével a HTML elemek az térben megadott tengely körül is elforgathatóak. Az x, y és z jellemzők a tengely irányát adják meg. A negyedik érték pedig az elforgatás mértékét.

Forgatás az elem középpontja körül:

kijelölő

{

transform

rotate3d(érték érték érték értékdeg);

}

1. Példa:

Forráskód


<style>
    .tarolo {
     ….
      position: relative; }
    .elem {
      ...
      position: absolute; }
    #rotate3d_1 .elem {
      -webkit-transform: rotate3d( 30, 0, 0, 30deg);
         -moz-transform: rotate3d( 30, 0, 0, 30deg);
           -o-transform: rotate3d( 30, 0, 0, 30deg);
              transform: rotate3d( 30, 0, 0, 30deg);
    }
    #rotate3d_2 .elem {
      -webkit-transform: rotate3d( 30, 0, 30, 30deg);
         -moz-transform: rotate3d( 30, 0, 30, 30deg);
           -o-transform: rotate3d( 30, 0, 30, 30deg );
              transform: rotate3d( 30, 0, 30, 30deg );
    }    
   #rotate3d_3 .elem {
      -webkit-transform: rotate3d( 30, 145, 30, 30deg);
         -moz-transform: rotate3d( 30, 145, 30, 30deg);
           -o-transform: rotate3d( 30, 145, 30, 30deg );
              transform: rotate3d( 30, 145, 30, 30deg );
    }
</style>     
... 
<body>   
  <div id="rotate3d_1" class="tarolo">
    <div class="elem"> rotate3d </div>
  </div>
  <div id="rotate3d_2" class="tarolo">
    <div class="elem"> rotate3d ( -45deg )</div>
  </div>
  <div id="rotate3d_3" class="tarolo">
    <div class="elem"> rotate3d ( -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_rotate3d_02.html