Animation cards Javascript and CSS

问题

I would move cards on click and put them on the green table with animation of transition; then when cards are on the table, when i click on them, they must show their front face, and then return with back face. The code doesn't work, i see the back cards on the left of the page but when i click on nothing happens.

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://placehold.it/100x150/44F/000.png&text=Back";
  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;
}

<body>
  <div class="page">
    <div class="table">

      <div id="card_00">
        <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
      </div>
      <div id="card_01">
        <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
      </div>
      <div id="card_02">
        <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
      </div>
      <div id="card_03">
        <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
      </div>
      <div id="card_04">
        <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
      </div>
      <div id="card_05">
        <img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
      </div>

    </div>
  </div>
</body>

来源：https://stackoverflow.com/questions/28167989/animation-cards-javascript-and-css

标签

javascript

jquery

html

css

webkit-animation