Rotating CSS cube

Question

I want to create a CSS cube that has 4 sides (front, back, top, bottom) and it rotates up (or down) constantly only on X axis. But for some reason I can't align all the 4 sides so it looks like a cube. Here's my markup:

<div class="cube">
<div class="front">
    <h1>Front</h1>
</div>
<div class="bottom">
    <h2>Bottom</h2>
</div>
<div class="top">
    <h2>Top</h2>
</div>
<div class="back">
    <h2>Back</h2>
</div>

And my CSS:

body {
color: rgb(6, 106, 117);
text-transform: uppercase;
font-family: sans-serif;
font-size: 100%;
background: #F4F6F8;
padding: 3em 0 0 0;
line-height: 62px;
-webkit-perspective: 1000px; /* <-NB */
}

.cube {
width: 30%;
text-align: center;
margin: 0 auto;
height: 100px;

-webkit-transform-style: preserve-3d;
-webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
background: rgb(247, 247, 247);
border: 1px solid rgba(147, 184, 189, .8);
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
height: 100px;
}

.front {
-webkit-transform: translateZ(50px);
}

.bottom {
-webkit-transform: rotateX(-90deg) translateZ(-50px);
transform: rotateX(-90deg) translateZ(-50px);
}

.top {
-webkit-transform: rotateX(90deg) translateZ(-50px);
}

.back {
-webkit-transform: rotateX(180deg) translateZ(-50px);
}

@-webkit-keyframes rotate-cube {
0%{-webkit-transform: rotateX(0deg);}
10%{-webkit-transform: rotateX(90deg);}
40%{-webkit-transform: rotateX(180deg);}
60%{-webkit-transform: rotateX(270deg);}
90%{-webkit-transform: rotateX(360deg);}
100{-webkit-transform: rotateX(360deg);}
}

Here's a JSFiddle. Don't mind the animation itself, I know it's not pretty, but it's still a work in progress. For now I only want to align all the 4 sides properly.

What did I do wrong and how can I align all the 4 sides?

Answer 1

Here is one solution, you need to position them absolute first to make sure you have one clear start position:

 body {
    color: rgb(6, 106, 117);
    text-transform: uppercase;
    font-family: sans-serif;
    font-size: 100%;
    background: #F4F6F8;
    padding: 3em 0 0 0;
    line-height: 62px;
    -webkit-perspective: 1000px;
}

.cube {
    width: 30%;
    text-align: center;
    margin: 0 auto;
    height: 100px;

    -webkit-transform-style: preserve-3d;
    -webkit-animation: rotate-cube 10s linear infinite;
}

.front, .bottom, .top, .back {
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189, .8);
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 0 5px 20px rgba(105, 108, 109, .3), 0 0 8px 5px rgba(208, 223, 226, .4) inset;
    height: 100px;
    position: absolute;
    width: 100%;
}

.front {
    -webkit-transform: translateZ(50px);
}

.bottom {
    -webkit-transform: rotateX(90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.top {
    -webkit-transform: rotateX(-90deg) translateZ(-50px) rotateY(180deg) rotateZ(180deg);
}

.back {
    -webkit-transform: rotateX(180deg) translateZ(50px);
}

@-webkit-keyframes rotate-cube {
    0%{-webkit-transform: rotateX(0deg);}
    10%{-webkit-transform: rotateX(90deg);}
    40%{-webkit-transform: rotateX(180deg);}
    60%{-webkit-transform: rotateX(270deg);}
    90%{-webkit-transform: rotateX(360deg);}
    100{-webkit-transform: rotateX(360deg);}
}

see fiddle:# http://jsfiddle.net/upyht8sb/7/

Answer 2

Use this code and remove the parts you don't need from the HTMl. Didn't know which ones you wanted removed so i made the whole thing.

HTML

<div id="container">
  <div class="step">
    <div class="front"></div>
    <div class="right"></div>  
    <div class="left"></div>            
    <div class="back"></div>            
    <div class="top"></div>
    <div class="bottom"></div>
  </div>

CSS

#container{
width:100%;
margin-top:100px;
-webkit-perspective : 1000px;
-webkit-perspective-origin  : 25% -15%;
-moz-perspective : 1000px;
-moz-perspective-origin  : 25% -15%;
}

.step{
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
-webkit-transform-style : preserve-3d;
-webkit-animation:rotate 5s infinite linear;
-moz-transform-style : preserve-3d;
-moz-animation:rotate 5s infinite linear;
transform-style : preserve-3d;
animation:rotate 5s infinite linear;
}
@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
@-moz-keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
@keyframes rotate {
  from {
    -webkit-transform: rotateX(0deg) rotateY(0deg);
  }
  to{
    -webkit-transform:rotateZ(360deg) rotateX(360deg) ;
  }
}
.step>div {
position: absolute;
opacity: 1;
}
.front{
width:200px;
height:200px;
background:#000;
-webkit-transform: rotateY(0deg) translateZ(0px);
}
.right{
width:200px;
height:200px;
background:#222;
-webkit-transform: rotateY(90deg) translateZ(100px) translateY(0) translateX(100px);
}
.left{
width:200px;
height:200px;
background:#444;
-webkit-transform: rotateY(90deg) translateZ(-100px) translateY(0) translateX(100px);
}
.back{
width:200px;
height:200px;
background:#666;
-webkit-transform: rotateY(0deg) translateZ(-200px) translateY(0) translateX(0px);
}
.top{
width:200px;
height:200px;
background:#888;
-webkit-transform: rotateX(90deg) translateZ(100px) translateY(-100px) translateX(0px);
}
.bottom{
width:200px;
height:200px;
background:#aaa;
-webkit-transform: rotateX(90deg) translateZ(-100px) translateY(-100px) translateX(0px);
}

And here's a fiddle http://jsfiddle.net/bwpuab64/2/

Answer 3

Don't know if this is the best way to do it, but it seems adding position: absolute, (and a width), to the sides of the cube and then changing just the translation of "front":

.front {
    -webkit-transform: translateZ(-50px);
}

Seems to make it work (although texts are then displayed upside down). Didn't really checked the translate and rotate properties values themselves, so maybe setting position could be avoided, but it's what first came to my mind.