Card Turn 2.x

Improving this function

by Paul Schmitt

HTML

<div id="card-container-a">
    <ul class="cardlist">
        <li>
            <div class="container-card-b">
                <div class="card">
                    <div class="front">
                        <img src="https://lh5.googleusercontent.com/-gYUEO9eVAf4/VEXTPNe_plI/AAAAAAAALoc/TVH3jNDHGqs/s524/card-front.jpg" alt="A">
                    </div>
                    <div class="back">
                        <img src="https://lh6.googleusercontent.com/-mAP0l6J0Seg/VEXTO3tJJ-I/AAAAAAAALoY/tYE6Le_TXrs/s524/card-back.jpg" alt="B">
                    </div>
                </div>
            </div>
        </li>
    </ul>
</div>

CSS

.cardlist ul, li {
    width: 374px;
    height: 524px;
    position: relative;
    list-style-type: none;
}

.card {
    width: 100%;
    height: 100%;
    position: absolute;
    perspective:800px;
    cursor:pointer;
}
.card div {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition-duration: 400ms;
    transition-duration: 400ms;
    z-index:10;
    -webkit-transition: 1s ease-in-out;
    -moz-transition: 1s ease-in-out;
    -o-transition: 1s ease-in-out;
}
.card .front {
    background: red;
}
.card .back {
    background: blue;
    z-index:0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.card.flip .front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    z-index:0;
}
.card.flip .back {
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
    z-index:10;
}
#card-container-a {
    float:left;
    position:relative;
    margin:auto 0;
    width:100%;
}
#card-container-b {
    float:left;
    position:relative;
    margin:auto 0;
    width:100%;
}

JavaScript

$(document.body).on('click', '.card', function () {
      console.log('click');
      $(this).toggleClass('flip');
  });