ONLY CSSでローテーションキューブを作成する

Question

私はコンテストに取り組んでいますが、いくつかの問題があります。 CSSだけを使ってキューブ（回転）を作成する必要があります。私が使用する必要が唯一のHTMLコードは次のようになります。これまでのところ

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

私はにabsoluted位置付け要素を使用しています：あなたは私が必要とする結果を見ることができるように

<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> 

は私が画像を貼り付け6人の顔を作成しますが、私はCSSだけを使って回転させる方法がわかりません。いいえJS、してください！

は、これを実行する方法を示したチュートリアル/例のトンがありますがそんなに

Answer 1

ありがとう：Example 1Example 2Example 3Example 4など例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>