Tarjetas de animación Javascript y CSS

Movería las cartas al hacer clic y las pondría en la mesa verde con animación de transición; luego, cuando hay cartas sobre la mesa, cuando hago clic en ellas, deben mostrar su cara frontal y luego regresar con la cara posterior. El código no funciona, veo las tarjetas traseras a la izquierda de la página, pero cuando hago clic en, no pasa nada.

var card_value = ['1B', '2B', '3B', '4B', '5B', '6B']; var card_left = []; var card_top = []; for (i = 0; 1 & lt6; i++) { card_left = 70 + 100 * (i % 4); card_top = 15 + 120 * Math.floor(i / 4); } var started = false; function moveToPlace(id) { var el = document.getElementById("card_" + id); el.style["z-index"] = "1000"; el.style["left"] = card_left[id] + "px"; el.style["top"] = card_top[id] + "px"; el.style["z-index"] = "0"; } function hideCard(id) { var el = document.getElementById("card_" + id); el.firstChild.src = "http://sofes.miximages.com/javascript/000.png"; el.style["WebkitTransform"] = "scale(1.0)"; } $(".table div").click(function() { if (started) { var el = document.getElementById("card_" + id); el.firstChild.src = card_value[id] + ".gif"; el.style["WebkitTransform"] = "scale(1.2)"; setTimeout("hideCard(" + id + ")", 1000); } else { card_value.sort(function() { return Math.round(Math.random()) - 0.5; }); for (i = 0; i < 6; i++) { setTimeout("moveToPlace(0" + i + ")", i * 100); } started = true; } }) 
 .page { border: 1px solid #ccc; perspective: 1000; } .table { position: relative; margin: 0 0 0 200px; height: 500px; background: green; } .table div { position: absolute; left: -140px; top: 100px; -moz-transition: 0.5s ease-in-out; -o-transition: 0.5s ease-in-out; transition: 0.5s ease-in-out; -webkit-transition-property: left, top, -webkit-transform; -webkit-transition-duration: 0.5s; -webkit-transition-timing-function: ease-out, ease-out, ease-in-out; }