Creare un cubo rotante con SOLO CSS

Sto lavorando a un concorso ma ho delle difficoltà. Devo creare un cubo (ruotandolo) usando solo i CSS. L'unico codice HTML che devo usare è:Creare un cubo rotante con SOLO CSS

<div id="container"> 
    <div id="imasters-cube"> 
    <div class="front"></div> 
    <div class="back"></div> 
    <div class="top"></div> 
    <div class="right"></div> 
    <div class="bottom"></div> 
    <div class="left"></div> 
    </div> 
</div>

ho incollato un'immagine in modo da poter vedere il risultato che ho bisogno:

http://www.sitepor500.com.br/index.php?q=criacao-site-seo&a

Finora sto usando elementi posizionati absoluted a creare i 6 volti ma non ho idea di come farlo ruotare usando solo i CSS. No JS, per favore!

Grazie mille

fonte

2013-07-26 amandanovaes

Questo è troppo ampio. E ci sono tonnellate di tutorial/esempi su di esso http://cssdeck.com/labs/9avpkiv8vl http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/ http : //cssdeck.com/labs/simple-css3-3d-cube http://www.the-art-of-web.com/css/3d-transforms/#.UfHVDo3rwZw ecc. –

GRAZIE GRAZIE! Ho visto MOLTO nei siti web brasiliani senza successo. Il mio inglese è cattivo, ecco perché non ho cercato in inglese. Ma il tuo primo link ha un ottimo esempio! Grazie ancora. – amandanovaes

Hey Sir @Zeaklous Come segnare la tua risposta come quella che ha risolto il mio problema? Appare nel commento quindi non posso scegliere il tuo! – amandanovaes

ci sono tonnellate di tutorial/esempi mostrano come fare questo: Example 1 Example 2 Example 3 Example 4 ecc

tirato da Esempio 2:

.spinner div { 
 
    position: absolute; 
 
    width: 120px; 
 
    height: 120px; 
 
    border: 1px solid #ccc; 
 
    background: rgba(255,255,255,0.8); 
 
    box-shadow: inset 0 0 20px rgba(0,0,0,0.2); 
 
    text-align: center; 
 
    line-height: 120px; 
 
    font-size: 100px; 
 
} 
 

 
.spinner .face1 { 
 
    -webkit-transform: translateZ(60px); 
 
    -ms-transform: translateZ(60px); 
 
    transform: translateZ(60px); 
 
} 
 
.spinner .face2 { 
 
    -webkit-transform: rotateY(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(90deg) translateZ(60px); 
 
    transform: rotateY(90deg) translateZ(60px); 
 
} 
 
.spinner .face3 { 
 
    -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
 
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
 
} 
 
.spinner .face4 { 
 
    -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
 
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
 
} 
 
.spinner .face5 { 
 
    -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
 
    -ms-transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
 
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
 
} 
 
.spinner .face6 { 
 
    -webkit-transform: rotateX(-90deg) translateZ(60px); 
 
    -ms-transform: rotateX(-90deg) translateZ(60px); 
 
    transform: rotateX(-90deg) translateZ(60px); 
 
} 
 

 
.spinner { 
 
    -webkit-animation: spincube 12s ease-in-out infinite; 
 
    animation: spincube 12s ease-in-out infinite; 
 
    -webkit-transform-style: preserve-3d; 
 
    -ms-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    -webkit-transform-origin: 60px 60px 0; 
 
    -ms-transform-origin: 60px 60px 0; 
 
    transform-origin: 60px 60px 0; 
 
} 
 

 
@-webkit-keyframes spincube { 
 
    16%  { -webkit-transform: rotateY(-90deg);    } 
 
    33%  { -webkit-transform: rotateY(-90deg) rotateZ(90deg); } 
 
    50%  { -webkit-transform: rotateY(180deg) rotateZ(90deg); } 
 
    66%  { -webkit-transform: rotateY(90deg) rotateX(90deg); } 
 
    83%  { -webkit-transform: rotateX(90deg);     } 
 
} 
 
@keyframes spincube { 
 
    16%  { -ms-transform: rotateY(-90deg); transform: rotateY(-90deg); } 
 
    33%  { -ms-transform: rotateY(-90deg) rotateZ(90deg); transform: rotateY(-90deg) rotateZ(90deg); } 
 
    50%  { -ms-transform: rotateY(180deg) rotateZ(90deg); transform: rotateY(180deg) rotateZ(90deg); } 
 
    66%  { -ms-transform: rotateY(90deg) rotateX(90deg); transform: rotateY(90deg) rotateX(90deg); } 
 
    83%  { -ms-transform: rotateX(90deg); transform: rotateX(90deg); } 
 
}

<div id="stage" style="width: 120px; height: 120px;"> 
 
    <div class="spinner"> 
 
     <div class="face1">1</div> 
 
     <div class="face2">2</div> 
 
     <div class="face3">3</div> 
 
     <div class="face4">4</div> 
 
     <div class="face5">5</div> 
 
     <div class="face6">6</div> 
 
    </div> 
 
</div>

fonte

2013-07-26 01:54:25

sbarazzarsi di quella sfortunata trasformazione dei ms. Potrebbe sembrare che aumenterà la tua compatibilità, ma fai ricerche per l'amor di Dio! Quella trasformazione con prefisso di ms era disponibile solo nelle versioni preliminari che praticamente nessuno usa più. Quindi, tutto ciò che sta facendo è sprecare spazio prezioso nel tuo file css. –

@ 3.1415926535897932384626433833 Dipende completamente da [quali piattaforme si desidera supportare] (http://stackoverflow.com/a/25110511/2065702). Questa risposta cerca di coprire * tutti * i casi. Avere una trasformazione di riserva preziosa non è uno "spazio prezioso" - è completamente trascurabile tranne quando è veramente necessario (sui browser che supportano solo le trasformazioni di '-ms-') –

Creare un cubo rotante con SOLO CSS

risposta

Problemi correlati