cube-turn.js

$(document).ready(function(){
  $('.front').bind('click', function(){
    $('#cube').css('webkitTransform', "translateZ(-246px) rotateY(0deg)");
  });
  $('.back').bind('click', function(){
    $('#cube').css('webkitTransform', "translateZ(-246px) rotateY(270deg)");
  });
  $('.cube-left').bind('click', function(){
    $('#cube').css('webkitTransform', "translateZ(-246px) rotateY(90deg)");
  });
  $('.cube-right').bind('click', function(){
    $('#cube').css('webkitTransform',"translateZ(-246px) rotateY(180deg)");
  });
});

cube.css

.left, .right {
  float: left;
  width: 492px;
  height: 492px;
  margin-right: 20px; }

.right {
  background: red; }

.camera {
  -webkit-perspective: 2600;
  perspective: 2600;
  -webkit-perspective-origin: 50% 50px; }

#cube {
  -webkit-transition: -webkit-transform 1s ease-out;
  -webkit-transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg) translateZ(-246px);
  position: relative;
  margin: 0 auto;
  height: 492px;
  width: 492px; }

.side {
  border-left: solid 1px #333333;
  position: absolute;
  height: 492px;
  width: 492px;
  background: url("img/bg-grain.png") #dddddd; }

#cube .side_1 {
  -webkit-transform: rotateY(90deg) translateZ(246px); }
#cube .side_2 {
  -webkit-transform: translateZ(246px); }
#cube .side_3 {
  -webkit-transform: rotateY(-90deg) translateZ(246px); }
#cube .side_4 {
  -webkit-transform: rotateY(180deg) translateZ(246px); }