user2224893 user2224893 - 1 year ago 66
CSS Question

Why does sometimes some of cards doesn't rotate at all?


Cards at least heave minimum 180 degree rotation, set in CSS with JS, but in multiple run some of it doesn't rotate at all. Can anyone please explain why?

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

<button onclick="rotate();">Rotate</button>
.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;
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;
$(this).css("transition", sp+"s").css("transform", "rotateY("+nn+"deg)");

Answer Source


To start rotating in this pen, card has to receive new css.

If the number, that was generated by rnd() function is the same as previous one, css of the element is not changed, so browser doesnt start the animation, it thinks that's it already been played (and it was).

To 'restart animation' if it has SAME params you have two ways - or remove element from DOM and get it back there (ugly, ah?) OR you can clear style and then set it back in time out. That trick will help 'restart' animation.

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

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

I've forked you pen and made all cards spin here.