Animated cube-like (only two faces) effect with CS

Question

I would like to reproduce this jsfiddle I that prepared based on this awesome tutorial (please check the demo). But I don't want the keys functionality, just on hover.

http://jsfiddle.net/b5rmW/5/

But that only uses 2 faces (front and back).

I tried, like this:

    #cube {
      position: relative;
      margin: 100px auto 0;
      height: 300px;
      width: 300px;
      -webkit-transition: -webkit-transform .5s linear;
      -webkit-transform-style: preserve-3d;

      -moz-transition: -moz-transform .5s linear;
      -moz-transform-style: preserve-3d;
    }

    .face {
      position: absolute;
      height: 300px;
      width: 300px;
      padding: 0px;
      background-color: rgba(50, 50, 50, 1);
      font-size: 27px;
      line-height: 1em;
      color: #fff;
      border: 1px solid #555;
      border-radius: 3px;
    }

    #cube .one  {
      -webkit-transform: rotateX(90deg) translateZ(150px);
      -moz-transform: rotateX(90deg) translateZ(150px);
      background:red;
    }

    #cube .two {
      -webkit-transform: translateZ(150px);
      -moz-transform: translateZ(150px);
    background:gold;
    }

    #cube .three {
      -webkit-transform: rotateY(90deg) translateZ(150px);
      -moz-transform: rotateY(90deg) translateZ(150px);
    background:blue;
    }

    #cube .four {
      -webkit-transform: rotateY(180deg) translateZ(150px);
      -moz-transform: rotateY(180deg) translateZ(150px);
    background:green;
    }

    #cube .five {
      -webkit-transform: rotateY(-90deg) translateZ(150px);
      -moz-transform: rotateY(-90deg) translateZ(150px);
    background:orange;
    }

    #cube .six {
      -webkit-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
      -moz-transform: rotateX(-90deg) rotate(180deg) translateZ(150px);
    }
#cube:hover{
   transform:rotateY(90deg); 

}

http://jsfiddle.net/5XTeU/1/

But the effect seems not to be the same.

What do you think is the minimum divs needed to achieve this first fiddle??

Thanks.

Answer 1

Update: So a slight misunderstanding on which faces need to exist… so this update is for a front and side face rotation.

However, in the original answer below, points 1) and 2) are still valid problems with the code. Points 3) and 4) no longer apply since they were concerned with the back face. The remaining CSS rules can be removed. You could also pull in the perspective wrapper to give the cube a "less flat" look - see updated demo.

HTML

<div id="experiment">
    <div class="cube">
        <div class="face front">
            front face
        </div>
        <div class="face side">
            side face
        </div>
    </div>
</div>

CSS

#experiment {
    -webkit-perspective: 800;
    -webkit-perspective-origin: 50% 200px;

    -moz-perspective: 800;
    -moz-perspective-origin: 50% 200px;
}

.cube {
    position: relative;
    margin: 100px auto 0;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;

    -moz-transition: -moz-transform .5s linear;
    -moz-transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 300px;
    width: 300px;
    padding: 0px;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color:red;
}

.cube .side {
    -webkit-transform: rotateY(-90deg) translateZ(150px);
    -moz-transform: rotateY(-90deg) translateZ(150px);
    background-color:orange;
}

.cube:hover{
    -webkit-transform:rotateY(90deg);     
}

---

Original Answer

There are 4 problems with the demo code, so let's look at them individually and see what the solution to each one is:

1) the HTML has a typo on class for the front face - it is missing an r

<div class="face font"> instead of <div class="face front">

2) For Webkit browsers you need to use the prefixed property for transform

-webkit-transform:rotateY(90deg); instead of transform:rotateY(90deg);

3) The back face you have chosen is the wrong face. You have repurposed the left face by accident. The front face is correct, which is a <div> translated 150px outwards. So the corresponding back face should be the one translated -150px inwards. However, if we just do that, the position would be correct but when rotated around the centre of the cube the back face would end up backwards. So the correct back face is the one that is initially rotated by 180° around the Y axis. However, by rotating around the Y axis the translation along Z still needs to be +150px and not -150px.

.cube .back{
  -webkit-transform: rotateY(180deg) translateZ(150px);
  -moz-transform: rotateY(180deg) translateZ(150px);
   background:orange;
}

4) The rotation to get the back face into the position where the front starts should be a rotation of 180° and not 90°

.cube:hover{
    -webkit-transform:rotateY(180deg);
}

Putting all those changes together gives this demo.

HTML

<div class="cube">
    <div class="face front">
        front face
    </div>
    <div class="face back">
        back face
    </div>
</div>

CSS

.cube {
    position: relative;
    margin: 100px auto 0;
    height: 300px;
    width: 300px;
    -webkit-transition: -webkit-transform .5s linear;
    -webkit-transform-style: preserve-3d;
    -moz-transition: -moz-transform .5s linear;
    -moz-transform-style: preserve-3d;
}

.face {
    position: absolute;
    height: 300px;
    width: 300px;
    padding: 0px;
    font-size: 27px;
    line-height: 1em;
    color: #fff;
    border: 1px solid #555;
    border-radius: 3px;
}

.cube .front {
    -webkit-transform: translateZ(150px);
    -moz-transform: translateZ(150px);
    background-color: red;
}

.cube .back {
    -webkit-transform: rotateY(180deg) translateZ(150px);
    -moz-transform: rotateY(180deg) translateZ(150px);
    background:orange;
}

.cube:hover{
    -webkit-transform:rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform:rotateY(180deg);
}