Why sometimes some cards do not rotate at all?

Question

example: http://codepen.io/anon/pen/mEoONW

Maps, at least, have a minimum rotation of 180 degrees, are set in CSS using JS, but in several modes some of them do not rotate at all. Can someone explain why?

<div class="flip-container">
    <div class="flipper">
        <div class="front"></div>
        <div class="back">?</div>
    </div>
</div>
...

<button onclick="rotate();">Rotate</button>
<style>
.flip-container {
    perspective: 1000px;float:left;
}
.flip-container, .front, .back {
    width: 160px;height: 220px;
}
.flipper {
    transform-style:preserve-3d;position: relative;
}
.front, .back {
    backface-visibility: hidden;position: absolute; top: 0; left: 0;    
}
.front {
    z-index: 2; transform: rotateY(0deg);background-color: blue;
}
.back {
    transform: rotateY(180deg); background-color: grey;font-size: 13em; text-align: center; vertical-align: middle;
}
</style>
<script>
function rnd(){
    var randNum = Math.floor((Math.random() * 20) + 1);
    if(randNum %2 == 0){//generated number is even
       randNum  = randNum +1 ;       
    }
    return randNum;
}
function rotate(){
    $('.flipper').each(function(i, obj) {
        var rn = rnd();
        var nn = 180 * rn;
        var sp = 0.2 * rn;
        console.log(rn);
        $(this).css("transition", sp+"s").css("transform", "rotateY("+nn+"deg)");
    });
}
</script>

Answer 1

Easy.

To start spinning in this pen, the map must receive a new css.

If the number that was created by the rnd () function matches the previous one, the css of the element does not change, so the browser does not start the animation, it thinks that it has already been played (and that was).

" ", SAME, - DOM (, ?) , . "" .

$element.attr('style', null); //remove old style before setting new
setTimeout(function(){

   $element.css("transition", "0.6s");
   $element.css("transform", "rotateY("180deg)");
}, 100);

.

Answer 2

, , :

function rotate() {
  $('.flipper').each(function(i, obj) {
    var rn = rnd();
    if ( $(this).data('rn') == rn ) { rn = rn + 2; }
    var nn = 180 * rn;
    var sp = 0.2 * rn;
    $(this).data('rn', rn);
    $(this).css("transition", sp + "s");
    $(this).css("transform", "rotateY(" + nn + "deg)");
    console.log(i + ': ' + rn + ' -d: ' + $(this).data('rn'));
  });
}

:

function rnd() {
  var randNum = Math.floor((Math.random() * 20) + 1);
  if (randNum % 2 == 0) { randNum = randNum + 1; }
  return randNum;
}

function rotate() {
  $('.flipper').each(function(i, obj) {
    var rn = rnd();
    if ( $(this).data('rn') == rn ) { rn = rn + 2; }
    var nn = 180 * rn;
    var sp = 0.2 * rn;
    $(this).data('rn', rn);
    $(this).css("transition", sp + "s");
    $(this).css("transform", "rotateY(" + nn + "deg)");
    //console.log(i + ': ' + rn + ' -d: ' + $(this).data('rn'));
  });
}
rotate();

$('body').on('click', '#rotate', function(){rotate();});

.cards::after { clear:both; content: ''; display: table;}

/* entire container, keeps perspective */
.flip-container {
  perspective: 1000px;
  float: left;
  margin: 2px;
}

.flip-container,.front,.back {
  width: 160px;
  height: 220px;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}


/* front pane, placed above back */
.front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
  background-color: blue;
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
  background-color: grey;
  font-size: 13em;
  text-align: center;
  vertical-align: middle;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cards">
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
  <div class="flip-container">
    <div class="flipper">
      <div class="front">
        <!-- front content -->
      </div>
      <div class="back">
        ?
      </div>
    </div>
  </div>
</div>
<button id="rotate">Rotate</button>

Hide result

jsFiddle: https://jsfiddle.net/azizn/9v6340fd/