css3 flipping card

by bighostkim

HTML

<h1>Card 1</h1>
  <button id="flip">Flip Card</button>

  <div id="container">
    <div id="cards" class="transform3d">
      <div class="card front">1</figure>
      <div class="card back">2</figure>
    </div>
  </div>

CSS

#container {
    height: 260px;
    position: relative;
    margin: 0 auto 40px;
    border: 1px solid #CCC;
    -webkit-perspective: 1600px;
    -moz-perspective: 1600px;
    -o-perspective: 1600px;
    perspective: 1600px;
}

#cards {
    width: 100%;
    height: 100%;
    /*position: absolute;*/
    -webkit-transition: -webkit-transform 1s;
    -moz-transition: -moz-transform 1s;
    -o-transition: -o-transform 1s;
    transition: transform 1s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

#cards.flipped {
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

#cards .card {
    display: block;
    height: 100%;
    width: 100%;
    /*line-height: 260px; */
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 140px;
    /*position: absolute;*/
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}

#cards .front {
    background: red;
}

#cards .back {
    background: blue;
    position:absolute;  
    top:0;
    left: 0;  
    -webkit-transform: rotateY( 180deg );
    -moz-transform: rotateY( 180deg );
    -o-transform: rotateY( 180deg );
    transform: rotateY( 180deg );
}

JavaScript

$(function() {
    $("#flip").click(function() {
        $("#cards").toggleClass("flipped");
    });
    $("#flip").click();
});