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.

t_dom93 · Accepted Answer · 2016-11-13 21:43:55Z

1

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.

edited Nov 13, 2016 at 21:43

answered Nov 13, 2016 at 15:43

t_dom93

11.6k3 gold badges56 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

A. Cheshirov Over a year ago

You didn't understand my question. I want to flip the card while it's rotated on 90 deg.

A. Cheshirov Over a year ago

Hey, but I need to use transform rotate because cards are actually images which I'm rotating. It's important to me.

t_dom93 Over a year ago

I edited answer, but not with the way we tried before, because I couldn't do that with JS, so maybe you will consider CSS3 way.

A. Cheshirov Over a year ago

I already found this CSS method. I really hoped that there is a way with jQuery itself. However, I'll give a last try and if I couldn't make it I'll use the CSS method. If someone knows how to make it just with JS, I will be very happy to see his solution.

A. Cheshirov · Accepted Answer · 2016-11-13 22:52:27Z

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/

Collectives™ on Stack Overflow

Transform rotate and flip effect - CSS3 and jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related