Create a rotating cube with ONLY CSS

Question

I am working on a contest but I am having some difficulties. I need to create a cube (rotating) using only CSS. The only HTML code that I have to 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 pasted an image so you can see the result that I need:

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

So far I am using absoluted positioned elements to create the 6 faces but I have no idea how to make it rotate using only CSS. No JS, please!

Thank you so much

This is too broad. And there are tons of tutorials/examples on it 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 etc. — Zach Saucier, Jul 26 '13 at 01:46
THANK YOU SO MUCH! I looked A LOT in brazilian websites no success. My english is bad that's why I did not search in english. But your first link has a great sample! Thank you again. — amandanovaes, Jul 26 '13 at 01:47
Hey Sir @Zeaklous How do I mark you answer as the one that solved my problem? It appears in the comment so I cannot choose yours! — amandanovaes, Jul 26 '13 at 01:51

Zach Saucier · Accepted Answer · 2023-06-27T22:34:11.767

There are tons of tutorials/examples show how to do this: Example 1 Example 2 Example 3 Example 4 etc.

Pulled 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 { 
    transform: translateZ(60px);
}
.spinner .face2 { 
    transform: rotateY(90deg) translateZ(60px); 
}
.spinner .face3 { 
    transform: rotateY(90deg) rotateX(90deg) translateZ(60px); 
}
.spinner .face4 { 
    transform: rotateY(180deg) rotateZ(90deg) translateZ(60px); 
}
.spinner .face5 { 
    transform: rotateY(-90deg) rotateZ(90deg) translateZ(60px); 
}
.spinner .face6 { 
    transform: rotateX(-90deg) translateZ(60px); 
}

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

@keyframes spincube {
    16%      { transform: rotateY(-90deg); }
    33%      { transform: rotateY(-90deg) rotateZ(90deg); }
    50%      { transform: rotateY(180deg) rotateZ(90deg); }
    66%      { transform: rotateY(90deg) rotateX(90deg); }
    83%      { 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>

get rid of that yucky -ms-transform. It may look like it will increase your compatibility, but do sme research for goodness sakes! That ms prefixed transform was only available in pre-releases which practically nobody uses any more. So, all that is doing is wasting valuable space in your css file. — , May 08 '17 at 12:55
@3.1415926535897932384626433833 It depends completely on [what platforms you want to support](http://stackoverflow.com/a/25110511/2065702). This answer seeks to cover *all* cases. Having a fallback transform valuable is not "valuable space" - it's completely negligible except for when it's really needed (on browsers that only support `-ms-` transforms) — Zach Saucier, May 08 '17 at 18:50

Create a rotating cube with ONLY CSS

1 Answers1

Linked