Flip Cards (codicode.com)

Framework 1 :

Framework 2 :

+ Js file(s) :	http://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js

+ Css file(s) :
	Apply

	Link :
Direct http link :
	Fork button :

Html code :
	Embed preview :
	Copy the following html code to your page to embed the preview, To include many previews on a single page, just repeat the first line. You can change the width, height and border color (bcolor).

<div class="refork-widget" code="b02" style="width:100%;height:200px;" bcolor="#ccc"></div> <script type="text/javascript" src="//snippet.run/d/z.js"></script>

HTML

&lt;div class="flipcard v"&gt;
    &lt;div class="front"&gt;
      &lt;img src="http://www.slapix.com/img/i2/love_me_or_hate_me.jpg"/&gt;      
    &lt;/div&gt;
    &lt;div class="back"&gt;
Love me&lt;br&gt;or hate me ..&lt;br&gt;&lt;br&gt;I'm still&lt;br&gt;gonna Shine!
    &lt;/div&gt;
&lt;/div&gt;  
&lt;div id="secondcard" class="flipcard h"&gt;
    &lt;div class="front"&gt;
      &lt;img src="http://www.slapix.com/img/i2/don_t_judge_me.jpg"/&gt;      
    &lt;/div&gt;
    &lt;div class="back"&gt;
    	Don't Judge Me&lt;br&gt;&lt;br&gt;
I was born&lt;br&gt;
to be&lt;br&gt;
Awsome&lt;br&gt;
not Perfect.
    &lt;/div&gt;
&lt;/div&gt;
&lt;div class="flipcard v"&gt;
    &lt;div class="front"&gt;
      &lt;img src="http://www.slapix.com/img/i2/stupidity_has_limits.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="back"&gt;
    	Everytime&lt;br&gt;
I thought that&lt;br&gt;
stupidity has limits,&lt;br&gt;&lt;br&gt;

You proved&lt;br&gt;
me wrong
    &lt;/div&gt;
&lt;/div&gt;
      &lt;div style="clear:both;padding:5px;padding-left:250px;"&gt;
        &lt;button onclick="flipcard();"&gt;Flip the second cards&lt;/button&gt;
      &lt;/div&gt;

CSS

body{
  background-color:#fff;
}
.flipcard {
  position: relative;
  width: 230px;
  height: 160px;
  margin:10px 5px;
  perspective: 500px;
  float:left;
}
.flipcard.v:hover .front, .flipcard.v.flip .front{
  transform: rotateY(180deg);
}
.flipcard.v:hover .back, .flipcard.v.flip .back{
  transform: rotateY(0deg);
}
.flipcard.v .back{
  transform: rotateY(-180deg);
}
.flipcard.h:hover .front, .flipcard.h.flip .front{
  transform: rotateX(180deg);
}
.flipcard.h:hover .back, .flipcard.h.flip .back{
  transform: rotateX(0deg);
}
.flipcard.h .back{
  transform: rotateX(-180deg);
}
.front, .back
{
  position:absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: all 0.5s ease-in;
  box-shadow: 5px 5px 5px #aaa;
  backface-visibility: hidden;
}
.back{
  text-align: center;
  color: white;
  background-color: #000;
  padding: 10px;
  font-family:verdana;
  font-size:18px;
  font-weight:bold;
  background: linear-gradient(45deg, #111 25%,transparent 26%,transparent 75%,#111 76%),
    linear-gradient(-45deg, #111 25%,transparent 26%,transparent 75%,#111 76%);
  background-color: #000;
  background-size: 25px 25px;
}
.flipcard img
{
  width:100%;
  height:100%;
}

Javascript

Flip Cards (codicode.com)

Link :

Fork button :

Embed preview :