Easy "3D CSS card flip" example

Let's see a very very basic integration of the awesome "card flip" effect with simple CSS3 properties. Feel free to use/share/contribute.

by newkidontheblock

HTML

<div class="block-wrap flip small-6 relative">
					<div class="card">
						<div class="front">
					<!-- FRONT SIDE START HERE -->

							<article class="item-sq">
								<figure class="square">

									<span class="exclusive-tag-3 cap-txt absolute">
									<p class="absolute">New</p>
									</span>

									<img src="http://photon.101medialablimit.netdna-cdn.com/hypebeast.com/image/2015/09/nike-air-max-90-wheat-001.jpg?w=1024">
									
								</figure>
							</article>

							<div class="item-details">
								
									<article>
										<span class="product-ref heading-4">60519</span>

										<h3 class="heading-5 no-text-trans">SMART Board 885ix - 85"<br/>interactive whiteboard</h3>
									</article>

									<div class="itemShadow"></div>


									<ul>
										<li class="small-5">
											<a href="#">
												<img class="item-btn" src="{site_url}/images/offers/logo-smart-2.png" alt="">
											</a>
										</li>
										
										<!-- INFO BTN -->

										<li class="small-5 active-btn">
                                            <h4>click me</h4>
										</li>
									</ul>

							 </div>

					<!-- FRONT SIDE ENDS HERE -->
				</div>

				<!-- BACK STARTS HERE -->
				
					<div class="d-hidden face back d-hidden">
						
						<figure>
							<img class="item-btn" src="{site_url}/images/offers/logo-smart-2.png" alt="">
							<figcaption>
								<p>60519</p>
							</figcaption>
						</figure>

						<article class="global-padding">

							<h3 class="heading-4 no-text-trans">SMART Board 885ix - 85"<br/>interactive whiteboard</h3>

							<ul>
								<li><p class="heading-6">Programmable Ambient Light Sensor</p></li>
								<li><p class="heading-6">Future Ready With Ops Create Free Expansion</p></li>
								<li><p class="heading-6">Special Characteristics</p></li>
							</ul>

						</article>

						<footer class="absolute">
							
							<ul class="global-padding">

								<li...

CSS

body {
 background: #ccc;   
}
.flip {
  -webkit-perspective: 800;
   width: 400px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotateY(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotateY(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}

.active-btn {
   width: 50px;
    height: 50px;
    font-size: 15px;
    position: absolute;
    bottom: 0;
    right: 0;
}

.item-sq img {
    
    width: 100%;
    max-width: 300px;
    max-height: 300px;
}

.block-wrap .d-hidden {
    background-color: #fff;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
  }
  .block-wrap .d-hidden figure {
    padding: 0 1em;
    margin: 0;
  }
  .block-wrap .d-hidden figure img {
    width: 100%;
    max-width: 55px;
    display: inline-block;
    margin-left: -0.2em;
    margin-top: 0.5em;
  }
  .block-wrap .d-hidden figure figcaption {
    display: inline-block;
    float: right;
    margin-top: 1em;
  }
  .block-wrap .d-hidden figure figcaption p {
    font-weight: bold;
    color: #000;
    margin-bottom: 0;
    font-size: 1em;
  }
  .block-wrap .d-hidden article h3 {
    border-bottom: 1px solid #999;
    padding-bottom: 0.9em;
  }

JavaScript

$('.active-btn').click(function(e){
   				 e.preventDefault();
    			$card = $(this).closest('.card');
   				$('.flipped').not($card).removeClass('flipped');
    			$card.toggleClass('flipped');
			});