Flip Boxes

Need to align them to center

by Paul Schmitt

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<div class="subjectCardsContainer">
  <ul><li><div class="container"><div class="card">
            <div class="front">
              <p></p>
            </div>
            <div class="back">
              <p></p>
            </div>
        </div></div></li>
    <li><div class="container"><div class="card">
            <div class="front">
              <p></p>
            </div>
            <div class="back">
              <p></p>
            </div>
        </div></div></li>
        <li><div class="container"><div class="card">
            <div class="front">
              <p></p>
            </div>
            <div class="back">
              <p></p>
            </div>
        </div></div></li>
        <li><div class="container"><div class="card">
            <div class="front">
              <p></p>
            </div>
            <div class="back">
              <p></p>
            </div>
        </div></div></li> 
      </ul></div>

CSS

/* Cards */
ul, #subjectCardsContainer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align:center;
}
 li {
    width: 150px;
    height: 150px;
    display: block;
    position: relative;
    list-style-type: none;
    display: inline-block;
     margin: 0px 5px;
}
    .card {
      width: 100%;
      height: 100%;
      position: absolute;
      perspective: 800px;
    }
    .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;
    }
    .card .front {				/*  Front of each card  */
      background: red;
      text-align: center;
    }
    .card .back {					/*  Back of each card  */
      background: blue;
      text-align: center;
      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;  }

JavaScript

$(document).ready(function() {
    $(".card").hover(function() {
      $(this).addClass("flip");
    });
    $(".card").mouseleave(function() {
      $(this).removeClass("flip");
   });
 });