2013-07-26 83 views
6

我正在參加一場比賽,但我遇到了一些困難。我需要使用CSS創建一個立方體(旋轉)。唯一的HTML代碼,我不得不使用方法是:僅使用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> 

我粘貼的圖像,所以你可以看到我需要的結果:

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

到目前爲止,我使用absoluted定位元素創建6面,但我不知道如何使它只使用CSS旋轉。沒有JS,請!

謝謝你這麼多

+0

這太寬泛了。並且有大量的教程/例子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等 –

+0

非常感謝!我在巴西網站上看了很多很成功。我的英語不好,這就是爲什麼我沒有用英語搜索。但你的第一個鏈接有一個很好的示例!再次感謝你。 – amandanovaes

+0

嘿@Zeaklous爵士我如何將你的答案標記爲解決我的問題的答案?它出現在評論中,所以我不能選擇你的! – amandanovaes

回答

8

有噸教程/例子說明如何做到這一點: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>

+0

擺脫那個易變-ms-變換。它可能看起來會增加你的兼容性,但是爲了善良而做一些研究!這個ms前綴轉換僅在預發行版中可用,而實際上沒有人再使用它。所以,所做的一切就是在你的css文件中浪費寶貴的空間。 – 2017-05-08 12:55:49

+0

@ 3.1415926535897932384626433833它完全取決於[您要支持的平臺](http://stackoverflow.com/a/25110511/2065702)。此答案旨在涵蓋*全部*個案。讓後備轉換變得有價值並不是「有價值的空間」 - 除非真正需要(僅支持'-ms-'轉換的瀏覽器),否則它完全可以忽略不計, –