Elforgatás az X tengely mentén

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

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

kijelölő

{

transform

rotateX(értékdeg);

}

1. Példa:

Forráskód


<style>
    .tarolo {
     ….
      position: relative; }
    .elem {
      ...
      position: absolute; }
    #rotateX_1 .elem {
      -webkit-transform: rotateX( 45deg );
         -moz-transform: rotateX( 45deg );
           -o-transform: rotateX( 45deg );
              transform: rotateX( 45deg );}
    #rotateX_2 .elem {
      -webkit-transform: rotateX( -45deg );
         -moz-transform: rotateX( -45deg );
           -o-transform: rotateX( -45deg );
              transform: rotateX( -45deg );}
   #rotateX_3 .elem {
      -webkit-transform: rotateX( -85deg );
         -moz-transform: rotateX( -85deg );
           -o-transform: rotateX( -85deg );
              transform: rotateX( -85deg );}
</style>     
... 
<body> 
  <div id="rotateX_1" class="tarolo">
    <div class="elem">rotateY( 45deg )</div>
  </div>
  <div id="rotateX_2" class="tarolo">
    <div class="elem">rotateY( -45deg )</div>
  </div>
  <div id="rotateX_3" class="tarolo">
    <div class="elem">rotateY( -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_rotateX_01.html