Univerzális kocka készítése CSS3-al - WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS

A HTML weboldalunk elemeiből csupán CSS3 stílusdeklarációk segítségével 3 dimenziós kockát építhetünk a következő módon.

A CSS3 animációk kockánkat el is vetjük. Azaz megtanítjuk majd gurulni.

1. Lépés:

A tároló elemek jellemzőinek beállítása, és az alsó oldal helyére illesztése.

Forráskód

<style>
  .kocka { position:fixed;
    left: 50px; top: 200px;}
  .jobbhatso, .balhatso, .jobbelso,
  .balelso, .also, .felso   
  { position: absolute; padding: 10px; 
    width: 180px; height: 180px; }
  .also {
    -webkit-transform: rotate(60deg) skew(0deg,-30deg) scale(1,1.16);
       -moz-transform: rotate(60deg) skew(0deg,-30deg) scale(1,1.16);
         -o-transform: rotate(60deg) skew(0deg,-30deg) scale(1,1.16);
        -ms-transform: rotate(60deg) skew(0deg,-30deg) scale(1,1.16);
            transform: rotate(60deg) skew(0deg,-30deg) scale(1,1.16);
    top: 42px;
    left: 100px;}
....
</style>     
... 
<body>   
  <div class="kontener"> 
    <div class="kocka">    
        <div class="also">
            <img src="..." alt="..." height="180px" width="180px"> 
        </div>
       .....
    </div>        
  </div>  
</body>

Eredmény*

2. Lépés:

A jobb hátsó oldal helyére illesztése.

Forráskód

<style>
  .kocka { position:fixed;
    left: 50px; top: 200px;}
  .jobbhatso, .balhatso, .jobbelso,
  .balelso, .also, .felso   
  { position: absolute; padding: 10px; 
    width: 180px; height: 180px; }
  .jobbhatso {
   -webkit-transform: skew(0deg, 30deg);
      -moz-transform: skew(0deg, 30deg);
        -o-transform: skew(0deg, 30deg);
       -ms-transform: skew(0deg, 30deg);
           transform: skew(0deg, 30deg);
    left: 200px;  top: -116px;
}
....
</style>     
... 
<body>   
  <div class="kontener"> 
    <div class="kocka">    
        <div class="jobbhatso">
            <img src="..." alt="..." height="180px" width="180px"> 
        </div>
       .....
    </div>        
  </div>  
</body>

Eredmény*

3. Lépés:

A bal hátsó oldal helyére illesztése.

Forráskód

<style>
  .kocka { position:fixed;
    left: 50px; top: 200px;}
  .jobbhatso, .balhatso, .jobbelso,
  .balelso, .also, .felso   
  { position: absolute; padding: 10px; 
    width: 180px; height: 180px; }
.balhatso {
    -webkit-transform: skew(0deg, -30deg);
       -moz-transform: skew(0deg, -30deg);
         -o-transform: skew(0deg, -30deg);
        -ms-transform: skew(0deg, -30deg);
            transform: skew(0deg, -30deg);
    left: 0px; top: -116px;
}
....
</style>     
... 
<body>   
  <div class="kontener"> 
    <div class="kocka">    
        <div class="balhatso">
            <img src="..." alt="..." height="180px" width="180px"> 
        </div>
       .....
    </div>        
  </div>  
</body>

Eredmény*

4. Lépés:

A bal első oldal helyére illesztése.

Forráskód

<style>
  .kocka { position:fixed;
    left: 50px; top: 200px;}
  .jobbhatso, .balhatso, .jobbelso,
  .balelso, .also, .felso   
  { position: absolute; padding: 10px; 
    width: 180px; height: 180px; }
  .balelso {
    -webkit-transform: skew(0deg, 30deg);
       -moz-transform: skew(0deg, 30deg);
         -o-transform: skew(0deg, 30deg);
        -ms-transform: skew(0deg, 30deg);
            transform: skew(0deg, 30deg);
  }
....
</style>     
... 
<body>   
  <div class="kontener"> 
    <div class="kocka">    
        <div class="balelso">
            <img src="..." alt="..." height="180px" width="180px"> 
        </div>
       .....
    </div>        
  </div>  
</body>

Eredmény*

5. Lépés:

A jobb első oldal helyére illesztése.

Forráskód

<style>
  .kocka { position:fixed;
    left: 50px; top: 200px;}
  .jobbhatso, .balhatso, .jobbelso,
  .balelso, .also, .felso   
  { position: absolute; padding: 10px; 
    width: 180px; height: 180px; }
  .jobbelso {
    -webkit-transform: skew(0deg, -30deg);
       -moz-transform: skew(0deg, -30deg);
         -o-transform: skew(0deg, -30deg);
        -ms-transform: skew(0deg, -30deg);
            transform: skew(0deg, -30deg);
    left: 200px;
  }
....
</style>     
... 
<body>   
  <div class="kontener"> 
    <div class="kocka">    
        <div class="jobbelso">
            <img src="..." alt="..." height="180px" width="180px"> 
        </div>
       .....
    </div>        
  </div>  
</body>

Eredmény*

6. Lépés:

Végül tegyük fel az íre a pontot, a dobozra pedig a tetejét.

Forráskód

<style>
  .kocka { position:fixed;
    left: 50px; top: 200px;}
  .jobbhatso, .balhatso, .jobbelso,
  .balelso, .also, .felso   
  { position: absolute; padding: 10px; 
    width: 180px; height: 180px; }
  .felso {
    -webkit-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16) ;
       -moz-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16) ;
         -o-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16) ;
        -ms-transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16) ;
            transform: rotate(60deg) skew(0deg, -30deg) scale(1, 1.16) ;
    top: -158px;
    left: 100px;
  }
....
</style>     
... 
<body>   
  <div class="kontener"> 
    <div class="kocka">    
        <div class="felso">
            <img src="..." alt="..." height="180px" width="180px"> 
        </div>
       .....
    </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_uni_kocka_epit_6.html