Card Turn 2.3

Improving this function. Now smaller and working with Blogger.

by Paul Schmitt

HTML

<div id="card-container-a">
    <ul class="cardlist">
        <li>
            <div class="card-container-b">
                <div class="card">
                    <div class="front">
                        <img src="https://lh4.googleusercontent.com/-uAjRxDctBhM/VEXaic0F0QI/AAAAAAAALpE/em6HMPltGjU/s524/card-front-a.jpg" alt="A" title="Click To Flip This Card" style="width:170px;">
                    </div>
                    <div class="back">
                        <img src="https://lh5.googleusercontent.com/-DabOrpWmS88/VEXae-nci7I/AAAAAAAALow/sw2l8AtUFJM/s524/card-back-a.jpg" alt="B" title="Click To Flip This Card" style="width:170px;">
                    </div>
                </div>
            </div>
        </li>
    </ul>
            <ul class="cardlist" style="margin-left:180px;">
        <li>
            <div class="card-container-b">
                <div class="card">
                    <div class="front">
                        <img src="https://lh5.googleusercontent.com/-gYUEO9eVAf4/VEXTPNe_plI/AAAAAAAALoc/TVH3jNDHGqs/s524/card-front.jpg" alt="C" title="Click To Flip This Card" style="width:170px;">
                    </div>
                    <div class="back">
                        <img src="https://lh6.googleusercontent.com/-mAP0l6J0Seg/VEXTO3tJJ-I/AAAAAAAALoY/tYE6Le_TXrs/s524/card-back.jpg" alt="D" title="Click To Flip This Card" style="width:170px;">
                    </div>
                </div>
            </div>
        </li>
    </ul>
            </ul>
            <ul class="cardlist" style="margin-left:360px;">
        <li>
            <div class="card-container-b">
                <div class="card">
                    <div class="front">
                        <img src="https://lh5.googleusercontent.com/-FdhLve1hk20/VEXaif4iToI/AAAAAAAALpA/roBAVMqIkw4/s524/card-front-c.jpg" alt="E" title="Click To Flip This Card" style="width:170px;">
                    </div>
                    <div class="back">
                      ...

CSS

#card-container-a {
    float:left;
    position:relative;
    margin:auto 0;
    width:100%;
}
#card-container-b {
    float:left;
    position:relative;
    margin:auto 0;
    width:100%;
}
.cardlist ul, li {
    position: relative;
    list-style-type: none;
}
.card {
    width:175px;
    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.zoomup {
    transform: scale(1.4);
    -ms-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    -o-transform: scale(1.4);
    z-index:11;
}
.card.zoomdown {
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    z-index:10;
}

JavaScript

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

  $(document).ready(function () {
      $('.card, .flip').mouseover(function () {
          $(this).toggleClass('zoomup');
      }).mouseout(function () {
          $(this).toggleClass('zoomdown');
      });
  });