How to rotate css 3d cube in javascript using a button trigger

Question

I have been trying to rotate a css 3-d cube using a button trigger (left) in javascript but I am not sure how animation works in css. I tried this jQuery function where #leftBtn is the button I want to rotate the cube by, and renderLeft/rotate are my attempted classes to rotate the shape. Here is a jsfiddle with the whole code

$("#leftBtn").click(function(event) {    
      $("#front").toggleClass('renderLeft');
      $("#front").toggleClass('rotate');           
        });

Answer 1

Young David Walsh does a nice little rotating cube that I've used before. You'll find that here