Create a spinning cube with CSS ONLY

Question

I am working on a competition, but I am having some difficulties. I need to create a cube (rotating) using only CSS. The only HTML I should use is:

<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 inserted an image to see the result I need:

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

So far I have been using absolute positioned elements to create 6 faces, but I don't know how to make it rotate using only CSS. No, JS, please!

Thank you very much

Answer 1

There are several examples of textbooks / examples that show how to do this: Example 1 Example 2 Example 3 Example 4 and others

Drawn from example 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>