Utwórz obrotowy sześcian TYLKO CSS

Pracuję nad konkursem, ale mam pewne trudności. Potrzebuję utworzyć sześcian (obracanie) używając tylko CSS. Jedynym Kod HTML, który trzeba użyć to:Utwórz obrotowy sześcian TYLKO 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>

I wklejony obraz, dzięki czemu można zobaczyć wynik, że potrzeba:

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

tej pory używam absoluted umieszczone elementy do utwórz 6 twarzy, ale nie mam pojęcia, jak je obrócić, używając tylko CSS. Nie JS, proszę!

Dziękuję bardzo

Źródło

2013-07-26 amandanovaes

To jest zbyt szeroki. I jest mnóstwo tutoriali/przykładów na ten temat 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 itp. –

DZIĘKUJEMY TAK DUŻO! Spojrzałem DUŻO na stronach brazylijskich bez sukcesu. Mój angielski jest zły, dlatego nie szukałem po angielsku. Ale twój pierwszy link ma świetną próbkę! Jeszcze raz dziękuję. – amandanovaes

Hej Sir @Zeaklous Jak mam oznaczyć Cię jako odpowiedź, która rozwiązała mój problem? Pojawia się w komentarzu, więc nie mogę wybrać twojego! – amandanovaes

Istnieje mnóstwo tutoriali/przykłady pokazują, jak to zrobić: Example 1 Example 2 Example 3 Example 4 itp

szarpana z przykładu 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>

Źródło

2013-07-26 01:54:25

pozbyć się tej yucky -ms-transform. Wygląda na to, że zwiększy to twoją kompatybilność, ale zrób badania dla dobra dobroci! Ta transformacja z prefiksem ms była dostępna tylko w wersjach wstępnych, których praktycznie nikt już nie używa. Wszystko, co robisz, to marnowanie cennego miejsca w pliku css. –

@ 3.1415926535897932384626433833 To zależy całkowicie od [platformy, które chcesz wspierać] (http://stackoverflow.com/a/25110511/2065702). Ta odpowiedź ma na celu pokrycie * wszystkich * przypadków. Przekształcenie wartości awaryjnej nie jest "cenną przestrzenią" - jest całkowicie pomijalne, z wyjątkiem sytuacji, gdy jest naprawdę potrzebne (w przeglądarkach obsługujących tylko transformaty '-ms-') –

Utwórz obrotowy sześcian TYLKO CSS

Odpowiedz

Powiązane problemy