JSFiddle - React, Tailwind, and code Playground

by mauricederegt

HTML

<h1>CSS Transition</h1>

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

<div class="card front"></div>

CSS

.card {
    width:50px;
    height:80px;
    transition:transform 0.5s;

}
.flipping {
    transform: translate(0, 20px) rotateY(90deg);
}

.front {
  background: red;
}
.back {
    background: blue;
}

JavaScript

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

var front = "http://mauricederegt.com/test/solitaire/cards/Kc.jpg"
var back = "http://mauricederegt.com/test/solitaire/cards/back.jpg"
$(".turnCSS").click(function () {
    var src = this.src == back ? front : back; //for toggling fun
    turnCSS(this, src)
})