10

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

3

1 Answer 1

20

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>

2
  • 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.
    – user7892745
    May 8, 2017 at 12:55
  • 1
    @3.1415926535897932384626433833 It depends completely on what platforms you want to support. 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) May 8, 2017 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.