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-transf