Transform rotate and flip effect - CSS3 and jQuery

Question

I'm working on a card game and making a simple flip effect. I have stuck with a CSS rotating.

This code without rotation work good:

        $(document).ready(function() {
        var card = $("#card");

        var width = card.width();
        var height = card.height();

        var left = card.offset().left;
        var top = card.offset().top;

        card.delay(500).animate({
            "width" : "0px",
            "height" : height+"px",
            "left" : "+="+(width / 2)+"px"
        }, 1000, function() {
            $(this).css('background-color', '#ff0000').animate({
                "width" : width+"px",
                "left" : "-="+(width / 2)+"px"
            }, 1000);
        });
    });

https://jsfiddle.net/Lo8egkra/1/

But if I add rotation:

        $(document).ready(function() {
        var card = $("#card");

        card.css({"transform": "rotate(90deg)"});

        var width = card.width();
        var height = card.height();

        var left = card.offset().left;
        var top = card.offset().top;

        card.delay(500).animate({
            "width" : "0px",
            "height" : height+"px",
            "left" : "+="+(width / 2)+"px"
        }, 1000, function() {
            $(this).css('background-color', '#ff0000').animate({
                "width" : width+"px",
                "left" : "-="+(width / 2)+"px"
            }, 1000);
        });
    });

https://jsfiddle.net/Lo8egkra/2/

You can see. It changes its position and the width and height sizes and the flip effect is quite buggy. Probably I'm doing something wrong but I've tried to fix this for few hours and without success.

Answer 1

Ohh, I think I figured it out.

$(document).ready(function() {
var card = $("#card");

card.css({"transform": "rotate(90deg)"});

var width = card.width();
var height = card.height();

var left = card.offset().left;

$({width : height}).delay(500).animate({width : 0}, {
  duration: 500,
  step: function (now) {
      card.css({"width" : now, "height" : width});
      card.css("left", left + (width / 2 - card.height() / 2));
  },
  complete: function() {
            card.css('background-color', '#ff0000');
      $({width : 0}).animate({width : height}, {
          duration: 500,
          step: function(now) {
              card.css({"width" : now, "height" : width});
              card.css("left", left + (width / 2 - card.height() / 2));
          }
      });
  }
  });
});

https://jsfiddle.net/Lo8egkra/3/

Answer 2

I have hard time to do this with javascript, so I propose maybe cleaner solution with CSS3.

Here is snippet, CSS looks little bit longer but it is because of all prefixes for browsers:

$(document).ready(function() {

  $("button.rotate").click(function() {
    $("#card").css({
      "transform": "rotate(90deg)"
    });
    $("#card").toggleClass('flip');
    setTimeout(function() {
      $('#card').toggleClass('flip');
    }, 1000);

    $("button").hide();
  });

  $("#card").toggleClass('flip');
  setTimeout(function() {
    $('#card').toggleClass('flip');
  }, 1000);

});

#card {
  position: relative;
  width: 300px;
  height: 200px;
}
#card .front {
  position: absolute;
  z-index: 999;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
#card.flip .front {
  z-index: 9;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
}
#card .back {
  position: absolute;
  width: 300px;
  height: 200px;
  background: #ff0000;
  overflow: hidden;
  z-index: 999;
  -webkit-transform: rotateX(-180deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -moz-transform: rotateX(-180deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
}
#card.flip .back {
  z-index: 10;
  -webkit-transform: rotateX(0deg) rotateY(0deg);
  -moz-transform: rotateX(0deg) rotateY(0deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="card">
  <div class="front">
    <img width="300" height="200" src="http://orig02.deviantart.net/4493/f/2009/309/5/a/joker_card_by_hojcat.jpg">
  </div>
  <div class="back"></div>
</div>
<br /><br />
<button class="rotate">Rotate</button>

Anyway If this is not suitable solution for you, I hope it will give you some knowledge that there is other way to do flipping.