css - Animated cube-like (only two faces) effect with CSS3 -

i reproduce jsfiddle prepared based on this awesome tutorial (please check the demo). don't want keys functionality, on hover.

http://jsfiddle.net/b5rmw/5/

but uses 2 faces (front , back).

i tried, 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 effect seems not same.

what think minimum divs needed achieve first fiddle??

thanks.

update: slight misunderstanding on faces need exist… update front , side face rotation.

however, in original answer below, points 1) , 2) still valid problems code. points 3) , 4) no longer apply since concerned back face. remaining css rules can removed. pull in perspective wrapper give cube "less flat" - 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 4 problems demo code, let's @ them individually , see solution each 1 is:

1) html has typo on class front face - missing r

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

2) webkit browsers need use prefixed property transform

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

3) back face have chosen wrong face. have repurposed left face accident. front face correct, <div> translated 150px outwards. corresponding back face should 1 translated -150px inwards. however, if that, position correct when rotated around centre of cube face end backwards. correct back face 1 rotated 180° around y axis. however, rotating around y axis translation along z still needs +150px , not -150px.

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

4) rotation back face position front starts should rotation of 180° , not 90°

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

putting changes gives this demo.

html

<div class="cube">     <div class="face front">         front face     </div>     <div class="face 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); }