All geek questions in one place

How to add a simple flip card animation?

I create a single player game. So far I have worked on most things, but flip-card animation is a pain in **.

See this script (it can be a little slower, as the whole game code is in it)

When you drag the card, the back of the card is replaced by the front. This is done in this part of the code:

upturn: function () {
            with(this) {
                if (is_downturned()) {
                    element.children('.downturned')
                        .removeClass('downturned').addClass(_SUITS[_suit()].color)
                        .append('<img height="80px" width="50px" border="0" src="http://mauricederegt.com/test/solitaire/cards/' + _RANKS[_rank()] + '' + _SUITS[_suit()].symbol + '.jpg">') //NEW
                    element.addClass(_scope());
                    if (element.hasClass('ui-draggable-disabled')) {
                        element.draggable('enable');
                    } else {
                        element.draggable({
                            containment: '#field',
                            revert: 'invalid',
                            revertDuration: 200,
                            zIndex: 99
                        });
                    }
                    if (!element.hasClass('ui-droppable-disabled')) {
                        element.droppable($.extend(DROPPABLE_OPTIONS, {
                            accept: _tableau_pile_scope()
                        }));
                    }
                }
            }
        }

It basically removes the back of the map ( .removeClass('downturned')) and adds a new class ( .addClass(_SUITS[_suit()].color)), where suitsis hart, clover, etc., and coloris black or red.

Now that this action happens, I want to add a nice flip animation.

I played with some textbooks on the Internet, but did not give me a working solution (basically, the cards started acting strange or the game stopped working).

Closest I could add:

-webkit-perspective: 600px;
-webkit-transform-style: preserve-3d;
-webkit-transform: rotateY(180deg);

/* -- transition is the magic sauce for animation -- */
-webkit-transition: 0.6s;

CSS :

.red,
.black {
  cursor: pointer;
  <<<code added here>>>
}

, , ( ):

  • , , /
  • / .

, ? , - .

EDIT:

this.element.addClass('container').append('<div class="downturned">'); this.element.addClass('container').append('<div class="downturned">').append('<div class="hiddencardfront">'); JS, div (, , -),

+4
5

, . , , . , 2D-, , , "". , . "" ( ). , "" ( ). , jQuery, html

<img class="card" src="http://mauricederegt.com/test/solitaire/cards/back.jpg" />

jQuery :

var CARDWIDTH = 50;
function turnCompatible(elem, src) {
    $(elem).animate({
        width: 0, //animate to zero
        marginLeft: CARDWIDTH / 2,
        marginRight: CARDWIDTH / 2
    }, function () {
        this.src = src //change the image
        $(this).animate({
            width: CARDWIDTH, //show the image again
            marginLeft: 0,
            marginRight: 0,
        })
    })
}
$(".card").click(function(){
   turnCompatible(this, src)
})

. , , CSS- , , CSS ( IE. IE < 10). -

function turnCSS(elem, src) {
    $(elem)
        .addClass("flipping")
        .bind("transitionend webkittransitionend", function () { //should add more prefixes
        this.src = src;
        $(this)
            .unbind("transitionend webkittransitionend")
            .removeClass("flipping")
    })
}

CSS

.card {
    width:50px;
    height:80px;
    -webkit-transition:-webkit-transform 0.5s;
    transition:transform 0.5s;
    background:#FF0;
}
.flipping {
    transform: translate(0, 20px) rotateY(90deg);
    -webkit-transform: translate(0, 20px) rotateY(90deg);
}

, , , , - .

+3

, , , , , . , 1 Div, , . , .

, - , .

, - . ,

+1

3D- , CSS/HTML/jQuery :

http://drewpeifer.com/demo/3d-card/index.html

( fork) github: https://github.com/Drewpeifer/3d-card-demo

README , CSS, - transit.js( ). "" div, div, . CSS-, "" div , div, .

, HTML JS, . , . !

0

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst1 {
      from {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
      to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@-webkit-keyframes myfirst2 {
      from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
      to {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
}

/* Standard syntax */
@keyframes myfirst1 {
      from {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
      to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@keyframes myfirst2 {
      from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
      to {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
}
@-webkit-keyframes mylast1 {
    from {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
    to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@-webkit-keyframes mylast2 {
    from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
    to {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
}
@keyframes mylast1 {
   from {
        -webkit-transform : rotateY(0deg);
        -moz-transform : rotateY(0deg);
        -ms-transform : rotateY(0deg);
        transform: rotateY(0deg);}
    to {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
}
@keyframes mylast2 {
   from {
        -webkit-transform : rotateY(90deg);
        -moz-transform : rotateY(90deg);
        -ms-transform : rotateY(90deg);
        transform: rotateY(90deg);}
    to {
        -webkit-transform : rotateY(180deg);
        -moz-transform : rotateY(180deg);
        -ms-transform : rotateY(180deg);
        transform: rotateY(180deg);}
}

</style>
<script>
$(document).ready(function()
  {
  $("#btn2").hide();
  $("#btn1").click(function(){
    $("#btn1").hide();
    $("#box1").css({  'z-index':'2', 
    '-webkit-animation': 'myfirst1 5s',
    'animation': 'myfirst1 5s'
    });

    $("#box2").css({ 'z-index':'0' ,
    '-webkit-animation': 'mylast1 5s',
    'animation': 'mylast1 5s'
    });
    setTimeout(function(){
      $("#box1").css({  'z-index':'0', 
      '-webkit-animation': 'myfirst2 5s',
      'animation': 'myfirst2 5s'
      });

      $("#box2").css({ 'z-index':'2' ,
      '-webkit-animation': 'mylast2 5s',
      'animation': 'mylast2 5s'
      });
    }, 5000);
    setTimeout(function(){$("#btn2").show();}, 10000);
  });

  $("#btn2").click(function(){ 
    $("#btn2").hide();   
    $("#box2").css({ 'z-index':'2', 
    '-webkit-animation': 'myfirst1 5s',
    'animation': 'myfirst1 5s'
    });

    $("#box1").css({  'z-index':'0',
    '-webkit-animation': 'mylast1 5s',
    'animation': 'mylast1 5s'
    });
    setTimeout(function(){
     $("#box2").css({ 'z-index':'0', 
     '-webkit-animation': 'myfirst2 5s',
     'animation': 'myfirst2 5s'
     });

     $("#box1").css({  'z-index':'2',
     '-webkit-animation': 'mylast2 5s',
     'animation': 'mylast2 5s'
     });
    }, 5000);
    setTimeout(function(){$("#btn1").show()}, 10000);
  });
});

</script>
</head>
<body>

<button id="btn1">flip</button>
<button id="btn2">Reset</button>
<div id="box1" style="position:fixed;background:#98bf21;height:100px;width:100px;margin:6px;">
</div><div id="box2" style="position:fixed;background:#bf2198;height:100px;width:100px;margin:6px;">
</div>

</body>
</html>

div, ( , . , , .

0

CSS 3d.

  • , , /
  • / .

1 2 :

-webkit-backface-visibility:hidden; /* Chrome, Safari, Opera */
backface-visibility:hidden;

And to focus on using your element:

transform-origin:50% 50%;
-ms-transform-origin:50% 50%; /* IE 9 */
-webkit-transform-origin:50% 50%; /* Chrome, Safari, Opera */
0
source

Source: https://habr.com/ru/post/1544606/

More articles:


All Articles