22+ CSS Flip Card Examples

This post contains a total of 22+ CSS Flip Card Examples with Source Code. All these Flip Cards are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Flip Card Examples

1. Wedding contact card

Made by Ricky Eckhardt. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Wedding Contact Card - Pen # 10 - 2020</title>
  <script src="https://kit.fontawesome.com/e2ac9cc532.js" crossorigin="anonymous"></script>

<style>
@import url("https://fonts.googleapis.com/css?family=Merriweather:300,400|Open+Sans:600,700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #ded5c6;
}

.front, .back {
  position: relative;
  background: white;
  background-size: contain;
  max-width: 500px;
  width: 100%;
  z-index: 1;
  color: #d55c5f;
  text-align: center;
  padding: 20px;
  overflow: hidden;
}

.flower {
  position: absolute;
  display: block;
  width: 180px;
  left: 160px;
  z-index: -1;
}
.flower img {
  height: 270px;
  opacity: 0.4;
}

.flowers-back {
  position: absolute;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2019684-png.png") center center;
  background-size: cover;
  width: 500px;
  height: 300px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  opacity: 0.4;
  z-index: -1;
}

.front h1, h2, h3 {
  font-weight: 400;
  letter-spacing: 7px;
}

.front h1, h2 {
  font-family: "Merriweather", serif;
}

.front h1 {
  font-size: 1.5rem;
}

.front h2 {
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.front h3 {
  font-family: "Open Sans", sans-serif;
  font-size: 0.85rem;
}
.front h3:nth-of-type(1) {
  margin-top: 40px;
}
.front h3:nth-of-type(2) {
  margin-bottom: 10px;
}

.front i {
  transform: rotate(45deg);
  font-size: 0.8rem;
}

.bar {
  width: 50px;
  height: 1px;
  background: #d55c5f;
  margin: 20px auto;
}

.comment-one, .comment-two {
  position: absolute;
  color: #e1cfba;
}

.comment-one {
  bottom: 70px;
  left: -35px;
  transform: rotate(-90deg);
}

.comment-two {
  top: 90px;
  right: -50px;
  transform: rotate(90deg);
}

.trd, .mrk {
  font-family: "open sans";
  position: absolute;
  color: #e1cfba;
  font-size: 0.8rem;
}

.trd {
  top: 20px;
  left: 20px;
}

.mrk {
  bottom: 20px;
  right: 20px;
}

.back {
  font-family: Merriweather;
  font-weight: 300;
  overflow: hidden;
}
.back h3 {
  font-size: 1rem;
  margin-top: 90px;
}
.back h4 {
  font-family: "Open Sans", sans-serif;
  font-size: 0.85rem;
  font-weight: 100;
  letter-spacing: 4px;
}

:root {
  --time: 0.707s;
}

.card {
  perspective: 40rem;
  width: 500px;
  height: 300px;
  margin: 50px auto;
}

.card-body {
  display: flex;
  transform-style: preserve-3d;
  transition: var(--time) transform;
}
.card:hover .card-body, .card:focus .card-body {
  transform: rotateX(-180deg);
}

.card-front, .card-back {
  backface-visibility: hidden;
  min-width: 100%;
}

.card-back {
  transform: rotateX(-180deg) translate(-100%, 0);
}

/* Make it Pretty */
.card {
  display: flex;
  transition: z-index, transform calc(var(--time) / 4);
  transition-delay: var(--time), 0s;
  text-decoration: none;
  color: inherit;
  z-index: 0;
}
.card:hover {
  transition-delay: 0s;
  z-index: 1;
}
.card:active {
  transform: scale(0.975);
}

.card-body {
  border-radius: 0.25rem;
  flex: 1;
}

.card-front, .card-back {
  display: flex;
  background-color: white;
  box-sizing: border-box;
  border-radius: 0.25rem;
}

.shadow, .card-front, .card-back {
  box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.04), 0 2px 2px rgba(0, 0, 0, 0.04), 0 4px 4px rgba(0, 0, 0, 0.04), 0 8px 8px rgba(0, 0, 0, 0.04), 0 16px 16px rgba(0, 0, 0, 0.04);
}
</style>
</head>
<body translate="no" >
  <a class="card" href="#">
  <div class="card-body">
    <div class="card-front">
      <div class="front">
        <div class="flower"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/38816/image-from-rawpixel-id-2019780-png%20(1).png"/></div>
        <h3>SOUTHERN VIRGINIA</h3>
        <div class="bar"></div>
        <h1>KYRIE ANNE JOHNSON</h1>
        <div class="bar"></div>
        <h2>WEDDING & LIFESTYLE</h2>
        <h3>PHOTOGRAPHER</h3><span><i class="fas fa-square"></i></span>
        <div class="comment-one">
          <p>lets capture &#9135;&#9135;&#9135;&#9135;</p>
        </div>
        <div class="comment-two">
          <p>moments together &#9135;&#9135;&#9135;&#9135;</p>
        </div>
        <div class="trd">
          <p>EST.</p>
        </div>
        <div class="mrk">
          <p>2019.</p>
        </div>
      </div>
    </div>
    <div class="card-back">
      <div class="back">
        <div class="flowers-back"></div>
        <h3>757 &#8226; 287 &#8226; 1608</h3>
        <div class="bar"></div>
        <h4>KYRIEAJOHNSON &#64; GMAIL.COM</h4>
      </div>
    </div>
  </div></a>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js'></script>
</body>
</html>

2. Careers Card Flip

Made by Warriors. Simple flip cards. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Careers Card Flip</title>
<style>
.flip-cards {
  list-style: none;
  max-width: 840px;
  margin: 0 auto;
  padding: 0;
  text-align: center;
  font-size: 0;
  line-height: 0;
  font-family: sans-serif;
}

.flip-cards li {
  font-size: 14px;
  line-height: 18px;
  line-height: initial;
  display: inline-block;
  -webkit-perspective: 800px;
  -ms-perspective: 800px;
  perspective: 800px;
  position: relative;
  width: 48%;
  min-width: 200px;
  margin: .5%;
  height: 230px;
  cursor: pointer;
}

@media only screen and (min-width:550px) {
  .flip-cards li {
    width: 32%
  }
}

@media only screen and (min-width:750px) {
  .flip-cards li {
    width: 24%
  }
}

.flip-cards li .card {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  text-transform: uppercase;
  color: #fefefe;
  font-weight: 700;
  -webkit-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s ease;
  transition: transform 1s ease;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}

.flip-cards li .card.flipped {
  -webkit-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-cards li .card > div {
  -webkit-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background: #e8e8e8;
}

.flip-cards li .card > div.back {
  -webkit-transform: rotateY(180deg) translateZ(1px);
  -ms-transform: rotateY(180deg) translateZ(1px);
  transform: rotateY(180deg) translateZ(1px);
  background: #003399;
  color: #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-transform: none;
  font-size: 1.2em;
  font-weight: 400;
  font-style: normal;
  display: table;
}

.flip-cards li .card > div.back p {
  display: table-cell;
  vertical-align: middle;
  padding: 30px;
  font-weight: 400;
}

.flip-cards li .card > div.front {
  display: table;
  background-color: black;
  background-size: cover;
  background-position: center center;
}

.flip-cards li .card .front p {
  display: table-cell;
  vertical-align: middle;
  padding: 30px;
  font-weight: 700;
  font-size: 60px;
}
</style>
</head>
<body translate="no" >
  <ul class="flip-cards">
  <li>
    <div class="card">
      <div class="back">
        <p><strong>Trust</strong><br />We trust one another and always assume positive intent.</p>
      </div>
      <div class="front" style="background-image:url(https://www.nba.com/.element/media/2.0/teamsites/warriors/images/careers-team-values-bg-trust.jpg)">
        <p>T</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <div class="back">
        <p><strong>Empathy</strong><br />We endeavor to understand the point of view of our colleagues as we work together to achieve organizational goals.</p>
      </div>
      <div class="front" style="background-image:url(https://www.nba.com/.element/media/2.0/teamsites/warriors/images/careers-team-values-bg-empathy.jpg)">
        <p>E</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <div class="back">
        <p><strong>Accountability</strong><br />We build upon our strengths, own our failures, and learn from our wins and our losses.</p>
      </div>
      <div class="front" style="background-image:url(https://www.nba.com/.element/media/2.0/teamsites/warriors/images/careers-team-values-bg-accountability.jpg)">
        <p>A</p>
      </div>
    </div>
  </li>
  <li>
    <div class="card">
      <div class="back">
        <p><strong>Modesty</strong><br />Humility remains at our core as we strive for excellence both on and off the court.</p>
      </div>
      <div class="front" style="background-image:url(https://www.nba.com/.element/media/2.0/teamsites/warriors/images/careers-team-values-bg-modesty.jpg)">
        <p>M</p>
      </div>
    </div>
  </li>
</ul>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
      <script id="rendered-js" >
// flip the cards when clicked / tapped
$('.flip-cards li').click(function (e) {
  $(this).children().toggleClass('flipped');
});

// get height of tallest card based on the back side
var tallestCard = 0;
$('.flip-cards .card .back').each(function () {
  tallestCard = Math.max(tallestCard, $(this).height());
});

// set all cards to match the height of the tallest
$('.flip-cards .card').each(function () {
  $(this).height(tallestCard);
});
    </script>
</body>
</html>

3. Halloween Flip Card

Made by Chofia. Halloween themed css flip cards. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
  
<style>
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans:300|Libre+Baskerville');

body{
  background-color: #0B1C27;
  color: white;
}

h1{
  font-size: 45px;
}

h1, h2{ 
  font-family: 'Libre Baskerville', serif;
  letter-spacing: 3px;
}

p{
  font-family: 'Josefin Sans', sans-serif;
  line-height: 1.2;
  letter-spacing: .5px;
}

.title {
  text-align: center;
  margin: auto 20px;
}

.container {
  margin: 0 6em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.flip-card {
  width: 325px;
  height: 500px;
  padding: .75em;
}

.back {
  background-color: #13050e;
  color: #fff;
  transform: rotateY(180deg);
  height: 550px;
}
 
.back .back-header {
  height: 45%;
  text-align: center;
}

.back .back-header img {
  height: 85%;
  margin: 20px;
  padding: 1em;
}

.front img {
  display: block;
  margin: auto;
  width: 100%;
}

.inner {
  position: relative;
  height: 100%;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.back, .front {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card:hover .inner{
  transform: rotateY(180deg);
}

.back .back-footer{
  height: 55%;
  padding: 15px;
}

.back-footer a {
  text-decoration: none;
  width: 120px;
  display: inline-block;
  padding: 7px 5px; 
  margin: 30px auto;
  transition: .8s;
  background-color: white;
  border: 1px solid white;
  color: #000
}


.back-footer a:hover {
  background-color: black;
  border: 1px solid white;
  color: #fff;
}
</style>
</head>

<body>
  <div class="title">
  <h1> Halloween Flip Card</h1>
  <p> Hover over the card for a Halloween fun fact. </p>
</div>
<!-- // title end -->

<div class="container">
  
   <!-- FLIP CARD 1 START -->
  <div class="flip-card">
    <div class="inner">
      <div class="front">
        <img src="https://bit.ly/3635Esj">
      </div>
      <!-- // front end -->

      <div class="back">
        <div class="back-header">
          <img src="https://bit.ly/31HF9Wb" />
        </div>
        <!-- //back-header end -->
        <div class="back-footer">
          <h2>Samhainophobia</h2>
          <p>Samhainophobia stands for the fear of Halloween</p>
          <div class="star-rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>

          <a href="#">Share</a>
          <a href="#">Rate</a>
        </div>
        <!-- //back-footer end -->
      </div>
      <!-- //back -->

    </div>
    <!-- //inner end -->
  </div>
  <!-- //flip-card end -->

  <!-- FLIP CARD 2 START -->
  <div class="flip-card">
    <div class="inner">
      <div class="front">
        <img src="https://bit.ly/33YgApr">
      </div>
      <!-- // front end -->

      <div class="back">
        <div class="back-header">
          <img src="https://bit.ly/35TNkSB" />
        </div>
        <!-- //back-header end -->
        <div class="back-footer">
          <h2>Jack O'Lanterns</h2>
          <p>The first Jack O’Lanterns were actually made from turnips.</p>
          <div class="star-rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
          </div>

          <a href="#">Share</a>
          <a href="#">Rate</a>
        </div>
        <!-- //back-footer end -->
      </div>
      <!-- //back -->

    </div>
    <!-- //inner end -->
  </div>
  <!-- //flip-card end -->

  <!-- FLIP CARD 3 START -->
  <div class="flip-card">
    <div class="inner">
      <div class="front">
        <img src="https://bit.ly/2pPTG4A">
      </div>
      <!-- // front end -->

      <div class="back">
        <div class="back-header">
          <img src="https://bit.ly/33ZZqrB" />
        </div>
        <!-- //back-header end -->
        <div class="back-footer">
          <h2>Witches</h2>
          <p>The word “witch” comes from the Old English wicce, meaning “wise woman.” </p>
          <div class="star-rating">
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star"></i>
            <i class="fas fa-star-half-alt"></i>
          </div>

          <a href="#">Share</a>
          <a href="#">Rate</a>
        </div>
        <!-- //back-footer end -->
      </div>
      <!-- //back -->

    </div>
    <!-- //inner end -->
  </div>
  <!-- //flip-card end -->
</div>
<!-- //container -->
</body>
</html>

4. Animal info cards

Made by David Murr. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  background: #2b2b2b;
}
img {
  max-width: 100%;
}
.cardBox {
  background-color: transparent;
  perspective: 1000px;
  width: 100%;
  height: 600px;
}
.card {
  min-width: 400px;
  max-width: 400px;
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);
}
.flipped {
  transform: rotateY(180deg);
}
.front,
.back {
  padding: 20px;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .front {
  background: #000;
  height: 100%;
  border-radius: 4px;
}
.card .front img {
  border-radius: 4px;
}
.card .back {
  background: #000;
  color: #fff;
  height: 100%;
  border-radius: 4px;
  outline: 1px solid rgba(255, 255, 255, .5);
  outline-offset: -10px;
  transform: rotateY(180deg);
  overflow: scroll;
}
.card .back p {
  font-family: sans-serif;
  font-size: 10pt;
  line-height: 1.5em;
}
.cardBox {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
  justify-items: center;
  align-items: center;
}
.cardBox .card {
  min-height: 600px;
}
a.learn-more {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  font-family: sans-serif;
  font-weight: bold;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .1);
  text-shadow: 1px 1px solid rgba(0, 0, 0, .3);
  padding: 15px;
  margin: 20px auto;
  transition: .1s linear all;
}
a.learn-more:hover {
  background: rgba(255, 255, 255, .2);
}
@media only screen and (min-width: 60em) {
  .cardBox {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr 1fr;
  }
}
</style>
</head>

<body translate="no" >
  <div class="cardBox">
  <div class="card">
    <div class="front" id="feral-hog">
      <img src="https://dwr.virginia.gov/wp-content/uploads/media/Invasive-Card-Feral-Hog.jpg" alt="Feral Hog" />
    </div>
    <div class="back">
      <h2>Feral Hog</h2>
      <p>Lorem ipsum dolor set amet.</p>
      <a href="#" class="learn-more">Learn More</a>
    </div>
  </div>
  <div class="card">
    <div class="front id="snakehead">
      <img src="https://dwr.virginia.gov/wp-content/uploads/media/Invasive-Card-Snakehead.jpg" alt="Snakehead" />
    </div>
    <div class="back">
      <h2>Snakehead</h2>
    </div>
  </div>
  <div class="card">
    <div class="front id="snakehead">
      <img src="https://dwr.virginia.gov/wp-content/uploads/media/Invasive-Card-Nutria.jpg" alt="Snakehead" />
    </div>
    <div class="back">
      <h2>Nutria</h2>
    </div>
  </div>
  <div class="card">
    <div class="front id="snakehead">
      <img src="https://dwr.virginia.gov/wp-content/uploads/media/Invasive-Card-Zebra-Mussel.jpg" alt="Snakehead" />
    </div>
    <div class="back">
      <h2>Zebra Mussel</h2>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
      <script id="rendered-js" >
$(".cardBox .card").click(function (e) {
  e.stopImmediatePropagation();
  $(this).toggleClass("flipped");
});
    </script>
</body>
</html>

5. Flip cards with vertical flip effects

Made by M-Amine. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/archivoblack/v17/HTxqL289NzCGg4MzN6KJ7eW6CYyF-w.ttf) format('truetype');
}
.title {
  font-family: 'Archivo Black';
  text-align: center;
}
body {
  font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background-color: #cfcfcf;
  background: linear-gradient(45deg, rgba(22, 167, 175, 0.6) 5%, rgba(23, 27, 158, 0.7) 55%, rgba(68, 9, 82, 0.5) 100%) no-repeat;
  background-size: 200%;
  color: #FFF;
}
html,
body {
  height: 100%;
}
.cards-wrapper {
  position: relative;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 5%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.card-wrapper {
  display: block;
  float: left;
  position: relative;
  margin: 0;
  width: 28%;
  height: 0;
  padding: 0 0 28%;
  perspective: 700px;
}
.card-object {
  color: #FFF;
  display: block;
  float: left;
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
  transform-style: preserve-3d;
}
.card-object.card-1 .front {
  background: #222 url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?dl=1) 90% 35%;
  background-size: 115%;
}
.card-object.card-1 .back .img-wrapper {
  background: transparent url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?dl=1) 70% 45%;
  background-size: 160%;
}
.card-object.card-1 .back .avatar {
  background: transparent url(https://www.dropbox.com/s/8cc22nblu4y4vzi/jenny.jpeg?dl=1) 40% 20%;
  background-size: 130% 130%;
}
.card-object.card-2 .front {
  background: #222 url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?dl=1) 50% 90% no-repeat;
  background-size: 105%;
}
.card-object.card-2 .back .img-wrapper {
  background: transparent url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?dl=1) 70% 50%;
  background-size: 140%;
}
.card-object.card-2 .back .avatar {
  background: transparent url(https://www.dropbox.com/s/8l8snk9wcyxbo24/miska.jpeg?dl=1) 50% 50% no-repeat;
  background-size: 140% 140%;
}
.card-object.card-3 .front {
  background: #222 url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?dl=1) 80% 100% no-repeat;
  background-size: 108%;
}
.card-object.card-3 .back .img-wrapper {
  background: transparent url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?dl=1) 90% 40% no-repeat;
  background-size: 115%;
}
.card-object.card-3 .back .avatar {
  background: #fff url(https://www.dropbox.com/s/l9knvp7vgci3p9c/kira.jpg?dl=1) 0 50% no-repeat;
  background-size: 120% 120%;
}
.card-object.flip-in.card-1,
.card-object.flip-in.card-3 {
  animation: flip-in-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-in.card-2 {
  animation: flip-in-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-out.card-1,
.card-object.flip-out.card-3 {
  animation: flip-out-hor-1 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-out.card-2 {
  animation: flip-out-hor-2 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object-hf .back {
  transform: rotateX(180deg);
}
.face {
  color: #fff;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-wrap: wrap;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.front {
  z-index: 20;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.face.front::before {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.1) 100%) no-repeat;
  opacity: 0.8;
  z-index: 20;
  transition: opacity 0.2s ease;
}
.face.front::after {
  position: absolute;
  top: 7%;
  right: 7%;
  bottom: 7%;
  left: 7%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 100;
  content: "";
}
.face.front .title-wrapper {
  position: absolute;
  bottom: 3%;
  left: 25%;
  right: 25%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-wrap: wrap;
  z-index: 100;
  transform: translateY(0);
  transition: transform 0.28s ease;
}
.face.front .title-wrapper .title {
  position: relative;
  font-family: 'Archivo Black', sans-serif;
  width: 100%;
  text-transform: uppercase;
  font-size: 2vw;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.face.front .title-wrapper .title::after {
  display: block;
  margin: 7% auto 8% auto;
  width: 100%;
  height: 1px;
  content: "";
  background-color: #fff;
  opacity: 0.5;
  transform: scale(0);
  transition: transform 0.15s;
}
.face.front .title-wrapper .subtitle {
  font-size: 0.9vw;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.15s;
}
.face.front:hover::before {
  opacity: 0.9;
}
.face.front:hover .title-wrapper {
  transform: translateY(-50%);
}
.face.front:hover .title-wrapper .title {
  opacity: 1;
}
.face.front:hover .title-wrapper .title::after {
  transform: scale(1);
  opacity: 0.5;
  transition-delay: 0.15s;
  transition-duration: 0.2s;
}
.face.front:hover .title-wrapper .subtitle {
  opacity: 0.7;
  transition-delay: 0.2s;
  transition-duration: 0.2s;
}
.face.back {
  color: #222;
  background: #fff;
  z-index: 10;
}
.info-container {
  position: absolute;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: flex-start;
  top: 6%;
  right: 6%;
  bottom: 6%;
  left: 6%;
  padding: 0;
}
.img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38%;
  z-index: 10;
}
.img-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(14, 6, 70, 0.6);
  opacity: 0.7;
}
.avatar {
  position: absolute;
  left: 50%;
  height: 68%;
  width: 25.84%;
  display: block;
  border-radius: 50%;
  margin-top: 25.08%;
  margin-left: -12.92%;
  background-color: #fff;
  border: 3px solid #FFF;
  z-index: 20;
}
.info-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 50.92%;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4% 15% 15%;
}
.info-title {
  font-size: 1.5vw;
  font-family: 'Archivo Black', sans-serif;
  text-align: left;
  padding: 0;
  margin: 0;
  text-align: center;
  display: block;
  width: 100%;
}
.info-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8% 0 0;
  margin: 8% 0 0;
  border-top: 1px solid #e0e0e0;
}
.info-content-item {
  color: #222;
  font-size: 0.75vw;
  line-height: 1;
  text-align: center;
  display: inline-block;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  color: #aaa;
}
.info-content-item span {
  display: block;
  font-weight: bold;
  font-size: 1.1vw;
  margin-top: 7px;
  text-transform: none;
  color: #222;
}
/**
 * ----------------------------------------
 * ANIMATIONS
 * ----------------------------------------
 */
@keyframes flip-in-hor-1 {
  0% {
    transform: translateY(0) translateZ(0) rotateX(0);
    transform-origin: 50% 0%;
  }
  100% {
    transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
    transform-origin: 50% 100%;
  }
}
@keyframes flip-out-hor-1 {
  0% {
    transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
    transform-origin: 50% 100%;
  }
  100% {
    transform: translateY(0) translateZ(0) rotateX(0);
    transform-origin: 50% 0%;
  }
}
@keyframes flip-in-hor-2 {
  0% {
    transform: translateY(0) translateZ(0) rotateX(0);
    transform-origin: 50% 100%;
  }
  100% {
    transform: translateY(100%) translateZ(100px) rotateX(180deg);
    transform-origin: 50% 0%;
  }
}
@keyframes flip-out-hor-2 {
  0% {
    transform: translateY(100%) translateZ(100px) rotateX(180deg);
    transform-origin: 50% 0%;
  }
  100% {
    transform: translateY(0) translateZ(0) rotateX(0);
    transform-origin: 50% 100%;
  }
}
</style>
</head>

<body translate="no" >
  <h2 class="title">Click to flip</h2>
<div class="cards-wrapper">
  <div class="card-wrapper">
    <div class="card-1 card-object card-object-hf"><a class="face front" href="#">
        <div class="title-wrapper">
          <div class="title">Jenny</div>
          <div class="subtitle">felis hairyus</div>
        </div></a><a class="face back" href="#">
        <div class="img-wrapper">
          <div class="avatar"></div>
        </div>
        <div class="info-wrapper">
          <div class="info-title">Jenny</div>
          <ul class="info-content">
            <li class="info-content-item">Age <span>6 years</span></li>
            <li class="info-content-item">Length <span>46cm</span></li>
            <li class="info-content-item">Weight <span>4kg</span></li>
          </ul>
        </div></a></div>
  </div>
  <div class="card-wrapper">
    <div class="card-2 card-object card-object-hf"><a class="face front" href="#">
        <div class="title-wrapper">
          <div class="title">Mishka</div>
          <div class="subtitle">felis catus</div>
        </div></a><a class="face back" href="#">
        <div class="img-wrapper">
          <div class="avatar"></div>
        </div>
        <div class="info-wrapper">
          <div class="info-title">Mishka</div>
          <ul class="info-content">
            <li class="info-content-item">Age <span>7 years</span></li>
            <li class="info-content-item">Length <span>42cm</span></li>
            <li class="info-content-item">Weight <span>3.8kg</span></li>
          </ul>
        </div></a></div>
  </div>
  <div class="card-wrapper">
    <div class="card-3 card-object card-object-hf"><a class="face front" href="#">
        <div class="title-wrapper">
          <div class="title">Kyra</div>
          <div class="subtitle">felix pumus</div>
        </div></a><a class="face back" href="#">
        <div class="img-wrapper">
          <div class="avatar"></div>
        </div>
        <div class="info-wrapper">
          <div class="info-title">Kyra</div>
          <ul class="info-content">
            <li class="info-content-item">Age <span>5 years</span></li>
            <li class="info-content-item">Length <span>50cm</span></li>
            <li class="info-content-item">Weight <span>5.2kg</span></li>
          </ul>
        </div></a></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script id="rendered-js" >
var $cards = $('.card-object'),
$faceButtons = $('.face');

$faceButtons.on('click', flipCard);

function flipCard(event) {
  event.preventDefault();

  var $btnFace = $(this),
  $card = $btnFace.parent('.card-object');

  if ($card.hasClass('flip-in')) {
    closeCards();
  } else {
    closeCards();
    openCard($card);
  }

}

function closeCards() {
  $cards.
  filter('.flip-in').
  removeClass('flip-in').
  addClass('flip-out');
}

function openCard($card) {
  $card.
  removeClass('flip-out').
  addClass('flip-in');
}
    </script>
</body>
</html>

6. Good and evil flip cards

Made by nichole. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Good and Evil Flip Cards</title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
  
<style>
.container {
  margin-top: 5%;
}

.flip {
    height: 200px;
    width: 300px;
    margin: 0 auto;
}

.flip img {
    height: 200px;
    width: 300px;
    margin: 0 auto;
}

#good .front {
    background: #2184cd;
    color: #fff;
    text-align: center;
    padding-top: 15%;
}

#evil .front {
    background: #000;
    color: #f00;
    text-align: center;
    padding-top: 15%;
}
</style>
</head>

<body translate="no" >
  <div class="container">
  <div class="row">
    <div class="col">
      <div class="flip" id="good"> 
      <div class="front">
        <h3>Good</h3>
      </div> 
      <div class="back">
       <img src="https://78.media.tumblr.com/62189bb4af688c05b7839ba7d544c8f1/tumblr_p78e3jXrDz1ssdqqao1_400.gif">
      </div> 
    </div>
    </div>
      
    <div class="col">
      <div class="flip" id="evil"> 
      <div class="front">
        <h3>Evil</h3>
      </div> 
      <div class="back">
          <img src="https://78.media.tumblr.com/f3113458fb05e8b73545ecbe7995e233/tumblr_n6ks6ysWMm1qkdo8ho1_500.gif">
     </div> 
    </div>
</div>
</div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.min.js'></script>
      <script id="rendered-js" >
$(function () {
  $(".flip").flip({
    trigger: 'hover',
    axis: 'x' });

});
    </script>
</body>
</html>

7. CSS only flip cards with flexible sizing

Made by Alexander. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>C</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,900");
.container {
  width: 50vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3rem auto;
}

.card {
  flex-shrink: 1;
  display: grid;
  font: 14px/28px Montserrat;
  color: brown;
  perspective: 40rem;
  --flipped: 0;
  --delay: .5s;
}
.card:not(:first-child) {
  margin-top: 1rem;
}
.card:hover {
  --flipped: 1;
  --delay: 0s;
}

.card__face {
  grid-area: 1/-1/1/-1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  backface-visibility: hidden;
  transition: 1s var(--delay) transform;
}

.card__face--front {
  z-index: 2;
  font-weight: 900;
  font-size: 50px;
  line-height: 50px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #FFF;
  background: var(--face-color);
  transform: rotateX(calc(180deg * var(--flipped)));
}

.card__face--reverse {
  z-index: 1;
  transform: rotateX(calc(180deg * var(--flipped) - 180deg));
  background: beige;
}
</style>

</head>
<body>
  <div class="container">
  <div class="card" style="--face-color: #c9f;">
    <div class="card__face card__face--front">
      flip me!<br>Take a peek
    </div>
    <div class="card__face card__face--reverse">
      A wonderful serenity
    </div>
  </div>
  <div class="card" style="--face-color: #fc9;">
    <div class="card__face card__face--front">
      flip me!
    </div>
    <div class="card__face card__face--reverse">
      A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine. I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.
    </div>
  </div>
</div>
</body>
</html>
 

8. CSS Flip Cards on Hover

Made by JSON Champagne. Simple smooth flip cards. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">  
<style>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
div {
  display:block;
}

img {
  margin-bottom: 10%;
}

h4 {
  margin-bottom: 2%;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.section {
  font-family: 'Poppins', Open Sans;
  display:flex;
  justify-content: center;
  flex-wrap:wrap;
  align-content:center;
  min-height: 100vh;
  background: #f8f8f8;
}

.flip-box-row {
  background-color: transparent;
  width: 300px;
  height: 300px;
  -webkit-perspective: 80vw;
  perspective: 80vw;
  margin: 3vw 3vw 0;
}
 
.flip-box-column {
  position: relative;
  width:100%;
  height: 100%;
  -webkit-transition: transform 0.8s;
  transition: transform 0.8s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
 
.flip-box-row:hover .flip-box-column {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}
 
.flip-box-front, .flip-box-back{
  position: absolute;
   width:100%;
  height: 100%;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #ffffff;
    border-radius: 8px 8px 8px 8px;
    overflow: hidden;
padding: 5%;
  box-shadow: 0px 10px 60px 0px rgba(39,39,52,0.06);
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content: center;
  line-height: 1.5em;
}
 
.flip-box-back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  background-color: #00a2fa;
  color: #ffffff;
}
</style>
</head>

<body translate="no" >
  <div class="section">
  <div class="flip-box-row">
    <div class="flip-box-column">
      <div class="flip-box-front">
          <img src="http://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2019/01/app-010-1.png" alt=""/>
          <h4 class="et_pb_module_header">User Experience</h4>
      </div>
      <div class="flip-box-back">
          <img src="http://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2019/01/app-010-1.png" alt=""/>
          <h4 class="et_pb_module_header">User Experience</h4>
          <p>This is a description.</p>
      </div>
    </div>
  </div>
    <div class="flip-box-row">
      <div class="flip-box-column">
        <div class="flip-box-front">
            <img src="http://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2019/01/app-09.png" alt=""/>
            <h4 class="et_pb_module_header">VIsual Design</h4>
        </div>
        <div class="flip-box-back">
<img src="http://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2019/01/app-09.png" alt=""/>
            <h4 class="et_pb_module_header">VIsual Design</h4>
            <p>This is a description.</p>
        </div>
      </div>
      </div>
      <div class="flip-box-row">
        <div class="flip-box-column">
          <div class="flip-box-front">
              <img src="http://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2019/01/app-11-1.png" alt=""/>
              <h4 class="et_pb_module_header">App Development</h4>
          </div>
          <div class="flip-box-back">
              <img src="http://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2019/01/app-11-1.png" alt=""/>
              <h4 class="et_pb_module_header">App Development</h4>
              <p>This is a description.</p>
          </div>
        </div>
      </div>
    </div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
</body>
</html>

9. Half flip cards 3d

Made by David Foliti. Half flip cards that open half on hover and open fully on click. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
<link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css'>
  
<style>
@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,800);

body {
    font-size: 16px;
    line-height: 22px;
    color: #555;
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}

#section-feature ul {
    margin: 100px 0 0 0;
    padding: 0;
    list-style: none;
    position: relative;
}

#section-feature li {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    height: 240px;
    padding: 2%;
    float: left;
    margin-bottom: 40px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#section-feature .sf-wrap {
    background-repeat: no-repeat;
    position: absolute;
    max-width: 280px;
    width: 100%;
    height: 100%;
    left: 50%;
    margin-left: -140px;
    top: 0;
    -moz-perspective: 600px;
    -webkit-perspective: 600px;
    -ms-perspective: 600px;
    -o-perspective: 600px;
    perspective: 600px;
    cursor: pointer;
}

.sf-mdl-left,
.sf-mdl-right,
.sf-mdl-left-full,
.sf-mdl-right-full {
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 100%;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    overflow: hidden;
}

.sf-icon {
    position: absolute;
    top: 30px;
    text-align: center;
    width: 100%;
    left: 0;
    width: 200%;
    color: #e4610e;
}


.sf-mdl-left-full .sf-icon,
.sf-mdl-right-full .sf-icon {
    color: #fff;
}

.sf-mdl-right,
.sf-mdl-right-full {
    left: auto;
    right: 0;
}

.sf-mdl-left-full,
.sf-mdl-right-full {
    background-color: #333;
    z-index: 9;
    color: #fff;
}

.sf-wrap a {
    color: #e4610e;
    text-decoration: none;
}

.sf-mdl-left,
.sf-mdl-right {
    background-color: #fff;
    z-index: 10;
}

.sf-wrap > .sf-mdl-right-full,
.sf-wrap > .sf-mdl-right {
    background-position: right -30px;
}

.sf-wrap > .sf-mdl-right,
.sf-wrap > .sf-mdl-left-full {
    -moz-backface-visibility: hidden;
    -moz-transform-style: preserve-3d;
    -moz-transform-origin: 0 0;
    -moz-transform: rotateY(0deg);

    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    -webkit-transform-origin: 0 0;
    -webkit-transform: rotateY(0deg);

    -o-backface-visibility: hidden;
    -o-transform-style: preserve-3d;
    -o-transform-origin: 0 0;
    -o-transform: rotateY(0deg);

    backface-visibility: hidden;
    transform-style: preserve-3d;
    transform-origin: 0 0;
    transform: rotateY(0deg);
}

.sf-wrap.hover > .sf-mdl-right {
    -webkit-transform: rotateY(-45deg);
    -moz-transform: rotateY(-45deg);
    -ms-transform: rotateY(-45deg);
    -o-transform: rotateY(-45deg);
    transform: rotateY(-45deg);
    background-color: #ececec;
}

.sf-wrap > .sf-mdl-left-full {
    -moz-transform-origin: 100% 0;
    -webkit-transform-origin: 100% 0;
    -o-transform-origin: 100% 0;
    transform-origin: 100% 0;
    -moz-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.sf-wrap.active > .sf-mdl-right,
.sf-wrap.hover.active > .sf-mdl-right {
    -moz-transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.sf-wrap.active > .sf-mdl-left-full {
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.active .sf-mdl-left-full,
.active .sf-mdl-right-full {
    z-index: 11;
}

.sf-wrap div h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 22px;
}

.sf-wrap div h3,
.sf-wrap div p {
    width: 200%;
    position: absolute;
    text-align: center;
    left: 0;
    top: 140px;
}

.sf-wrap div p {
    padding: 0 10%;
    line-height: 18px;
    font-size: 13px;
    top: 170px;
}

.sf-wrap div.sf-mdl-right h3,
.sf-wrap div.sf-mdl-right-full h3,
.sf-wrap div.sf-mdl-right p,
.sf-wrap div.sf-mdl-right-full p,
.sf-mdl-right .sf-icon,
.sf-mdl-right-full .sf-icon
{
    left: auto;
    right: 0;
}

.sf-wrap div.sf-mdl-left-full h3,
.sf-wrap div.sf-mdl-right-full h3 {
    top: 115px;
}
</style>
</head>
<body>
  <section id="section-feature" class="container">
    <div class="row">
        <ul>
            <li id="sf-innovation" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3>Gallia est omnis</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3>Gallia est omnis</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3><a href="#">Gallia est omnis</a></h3>
                        <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-rocket fa-5x"></i>
                        </div>
                        <h3><a href="#">Gallia est omnis</a></h3>
                        <p>Curabitur blandit tempus ardua ridiculus sed magna. Integer legentibus erat a ante historiarum dapibus.</p>
                    </div>
                </div>
            </li>

            <li id="sf-community" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3>Donec sed operae</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3>Donec sed operae</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3><a href="#">Donec sed operae</a></h3>
                        <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-camera-retro fa-5x"></i>
                        </div>
                        <h3><a href="#">Donec sed operae</a></h3>
                        <p>Hi omnes lingua, institutis, legibus inter se differunt. Donec sed odio operae, eu vulputate felis rhoncus.</p>
                    </div>
                </div>
            </li>

            <li id="sf-academy" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3>Hi omnes lingua</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3>Hi omnes lingua</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3><a href="#">Hi omnes lingua</a></h3>
                        <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-cloud-upload fa-5x"></i>
                        </div>
                        <h3><a href="#">Hi omnes lingua</a></h3>
                        <p>Nec dubitamus multa iter quae et nos invenerat. Ullamco laboris nisi ut aliquid ex ea commodi consequat.</p>
                    </div>
                </div>
            </li>

            <li id="sf-opportunity" class="col-md-3 col-sm-6 col-xs-12">
                <div class="sf-wrap">
                    <div class="sf-mdl-left">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star-half-o fa-5x"></i>
                        </div>
                        <h3>Idque Caesaris facere</h3>
                    </div>
                    <div class="sf-mdl-right">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star-half-o fa-5x"></i>
                        </div>
                        <h3>Idque Caesaris facere</h3>
                    </div>

                    <div class="sf-mdl-left-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star fa-5x"></i>
                        </div>
                        <h3><a href="#">Idque Caesaris facere</a></h3>
                        <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p>
                    </div>
                    <div class="sf-mdl-right-full">
                        <div class="sf-icon">
                            <i class="fa fa-fw fa-star fa-5x"></i>
                        </div>
                        <h3><a href="#">Idque Caesaris facere</a></h3>
                        <p>Morbi fringilla convallis sapien, id pulvinar odio volutpat. Contra legem facit qui id facit quod lex prohibet.</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
$(function () {
  $('#section-feature .sf-wrap').
  hover(function () {
    $(this).addClass('hover');
  }, function () {
    $(this).removeClass('hover');
  }).
  click(function (event) {
    //if (event.target.nodeName != 'A') {
    $(this).toggleClass('active');
    //}
  });
});
    </script>
</body>
</html>

10. Flip Cards

Made by Kelby Gassman. Product pricing cards that flips on button click. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css?family=Maven+Pro:400,700|Oswald");
body,
html {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: auto;
}

body {
  background-image: linear-gradient(-9deg, #efe9f3, white 20%);
  color: #2f304C;
  font-size: 16px;
  font-family: "Maven Pro", Arial, sans-serif;
  font-weight: 400;
}

* {
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}

.container {
  margin: 4rem auto;
  max-width: 860px;
  display: grid;
  grid-template-columns: 250px 250px 250px;
  grid-gap: 3rem;
}

.product-card-component {
  height: 300px;
  width: 100%;
  display: grid;
  perspective: 800px;
  position: relative;
}
.product-card-component:nth-child(2) .price-container {
  background-image: linear-gradient(-9deg, #f7d64c, 10%, #ffde51 80%);
}
.product-card-component:last-child .price-container {
  background-image: linear-gradient(-9deg, #92c3c0, 10%, #a6dedb 80%);
}
.product-card-component .price-container {
  background-image: linear-gradient(-9deg, #e83f2c, 10%, #fd5845 70%);
}
.product-card-component .product-card {
  border-radius: 5px;
  box-shadow: 3px 3px 3px 2px rgba(187, 187, 187, 0.3);
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.09, 0.61, 0.52, 1.24), box-shadow 0.1s ease-in-out, top 0.1s ease-in-out;
}
.product-card-component .product-card:hover {
  box-shadow: 5px 5px 8px 3px rgba(187, 187, 187, 0.7);
  top: -3px;
}
.product-card-component .product-card.flipped {
  transform: rotateY(180deg);
  box-shadow: -3px 3px 3px 2px rgba(187, 187, 187, 0.3);
}
.product-card-component .product-card.flipped:hover {
  box-shadow: -5px 5px 8px 3px rgba(187, 187, 187, 0.7);
}
.product-card-component .product-card.flipped .card-front {
  visibility: hidden;
}
.product-card-component .product-card .card-front,
.product-card-component .product-card .card-back {
  background: #fff;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  border-radius: 5px;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  padding: 0;
}
.product-card-component .product-card .card-back {
  transform: rotateY(180deg);
}
.product-card-component .product-card .card-back .more-info {
  background: whitesmoke;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 15px 30px 24px;
}
.product-card-component .product-card .card-back .buy-container {
  margin-top: -24px;
}
.product-card-component .product-card .button {
  text-align: center;
  margin: 16px auto 8px;
  display: block;
}
.product-card-component .price-container {
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding: 15px 30px;
  min-height: 109px;
}
.product-card-component .price-container h3 {
  font-size: 1.5rem;
  margin: 0;
}
.product-card-component .buy-container {
  margin-top: 20px;
  padding: 15px 30px;
}
.product-card-component .price {
  font-size: 5.75rem;
  font-family: "Oswald", sans-serif;
  line-height: 0;
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
  top: 6rem;
  position: absolute;
}
.product-card-component .price:before {
  content: "$";
  font-size: 2.75rem;
  top: -36px;
  position: relative;
}

.button {
  border: none;
  border-radius: 3px;
  box-sizing: border-box;
  color: #2f304C;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  font-family: "Maven Pro", arial, sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  height: 36px;
  width: auto;
  max-width: 160px;
  padding: 10px 16px;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s;
}
.button:hover {
  text-decoration: none;
}
.button.primary {
  background: #ffde51;
  color: #2f304C;
}
.button.primary:hover {
  background: #f7d64c;
}
.button.secondary {
  background: #f5f5f5;
  color: #2f304C;
}
.button.secondary:hover {
  background: #e3e3e3;
}
</style>
</head>
<body>
  <div id="root"></div>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.development.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.development.js'></script>
      <script id="rendered-js" >
class ProductCard extends React.Component {
  constructor(props) {
    super(props);

    this.flipIt = this.flipIt.bind(this);

    this.state = {
      isFlipped: false };

  }

  flipIt() {
    !this.state.isFlipped ?
    this.setState({ isFlipped: true }) :
    this.setState({ isFlipped: false });
  }

  render() {
    return /*#__PURE__*/(
      React.createElement("div", { className: "product-card-component", key: this.props.id.toString() }, /*#__PURE__*/
      React.createElement("div", { className: this.state.isFlipped ? "product-card flipped" : "product-card" }, /*#__PURE__*/
      React.createElement("div", { className: "card-front" }, /*#__PURE__*/
      React.createElement("div", { className: "price-container" }, /*#__PURE__*/
      React.createElement("h3", null, this.props.title), /*#__PURE__*/
      React.createElement("span", { className: "price" }, this.props.price)), /*#__PURE__*/

      React.createElement("div", { className: "buy-container" }, /*#__PURE__*/
      React.createElement("a", { className: "button secondary", onClick: this.flipIt }, "More Info"), /*#__PURE__*/


      React.createElement("a", { className: "button primary" }, "Buy"))), /*#__PURE__*/




      React.createElement("div", { className: "card-back" }, /*#__PURE__*/
      React.createElement("div", { className: "more-info" }, this.props.description), /*#__PURE__*/
      React.createElement("div", { className: "buy-container" }, /*#__PURE__*/
      React.createElement("a", { className: "button secondary", onClick: this.flipIt }, "Back"), /*#__PURE__*/


      React.createElement("a", { className: "button primary" }, "Buy"))))));
  }}
const App = () => /*#__PURE__*/
React.createElement("div", { className: "container" },
products.map((product) => /*#__PURE__*/
React.createElement(ProductCard, { id: product.id, title: product.title, price: product.price, description: product.description })));




const products = [
{
  id: 1,
  title: "Flip",
  price: "98",
  description: "Spicy jalapeno bacon ipsum dolor amet voluptate jerky bresaola cow, kevin pork shankle nulla pancetta. Irure ex burgdoggen nostrud in." },

{
  id: 2,
  title: "These",
  price: "124",
  description: "Burgdoggen ut sunt, corned beef pastrami nostrud proident ex dolore meatball pariatur ground round et. Ribeye bacon ball tip, turkey filet mignon tail proident." },

{
  id: 3,
  title: "Over",
  price: "80",
  description: "Pastrami doner irure in chuck dolor. Velit pastrami buffalo drumstick deserunt veniam flank mollit qui hamburger cupidatat." }];



ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));
    </script>
</body>
</html>

11. CSS Flip Cards

Made by Mike Boardley. Click the likes button to flip the cards. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
body {
  background-color: #1a0c1d;
  background-image: url("https://mikeboardley.com/portfolio/code-pen/images/flip-cards/bg-computer-coffee.png");
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 15px;
}

html,
body {
  font-size: 100%;
}

.item-wrap {
  display: inline-block;
  margin: 0 auto 1.25rem;
  width: auto;
}
.item-wrap img {
  max-height: 100%;
  max-width: 100%;
}

.flip-container {
  perspective: 1000;
}

/* flip the pane when hovered */
.flip-container.hover .flipper {
  transform: rotateY(180deg);
}
.flip-container.hover .flipper .front {
  z-index: 0;
}
.flip-container.hover .flipper .back {
  z-index: 1;
}

.flip-container, .front, .back {
  width: 100%;
  height: 100%;
}

/* flip speed goes here */
.flipper {
  transition: 0.6s;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.item-slide .flip-container .li-btn-close {
  right: convert-to-rem(7, 16px);
}
.item-slide .flip-container .li-btn-close:after, .item-slide .flip-container .li-btn-close:before {
  height: 1rem;
}
.flip-container .back {
  backface-visibility: hidden;
  background-color: rgba(204, 204, 204, 0.1);
  color: #222;
  left: 0;
  padding: convert-to-rem(10, 16px);
  position: absolute;
  top: 0;
}
.flip-container .back:before {
  border: convert-to-rem(1, 16px) solid #000;
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: convert-to-rem(36, 16px);
}
.flip-container .back .tile-content {
  bottom: 0.625rem;
  font-size: 0.875rem;
  left: 0.625rem;
  overflow: hidden;
  position: absolute;
  text-align: left;
  right: 0;
  top: 2.5rem;
}
@media (min-width: 992px) {
  .flip-container .back .tile-content {
    top: 3.125rem;
  }
}
.flip-container .back ul {
  padding: 0;
}
.flip-container .back li {
  color: #fff;
}
.flip-container .back li + li {
  margin-top: 10px;
}

.list-basic li {
  list-style: none;
}

.item-banner {
  background: rgba(64, 64, 87, 0.7);
  bottom: 0;
  left: 0;
  padding: 15px 20px;
  position: absolute;
  right: 0;
  text-align: right;
}
.item-banner, .item-banner a {
  color: #ffffff;
}
.item-banner a .fa-heart-o {
  color: #999;
}
.item-banner:before {
  bottom: convert-to-rem(-30, 16px);
  color: #404057;
  content: attr(data-proof);
  font-size: convert-to-rem(14, 16px);
  font-weight: bold;
  left: 0;
  padding: convert-to-rem(5, 16px);
  position: absolute;
  text-align: center;
  width: 100%;
}
.item-banner .lt-link-fav {
  left: convert-to-rem(10, 16px);
  margin-top: convert-to-rem(-8, 16px);
  position: absolute;
  top: 50%;
}
.item-banner .lt-link-fav .fa {
  font-size: convert-to-rem(16, 16px);
  padding-left: 1px;
  overflow: hidden;
  transition: opacity 0.3s ease-in-out;
}

.front {
  backface-visibility: hidden;
  position: relative;
  z-index: 1;
  /* for firefox 31 */
  transform: rotateY(0deg);
}

.tile-hd {
  background-color: #404057;
  color: #fff;
  left: 0;
  padding: 0.625rem;
  position: absolute;
  right: 0;
  top: -0.625rem;
}
.tile-hd .li-btn-close, .tile-hd .li-btn-close:before, .tile-hd .li-btn-close:after {
  border-color: #ffffff;
}
.tile-hd h4 {
  font-size: convert-to-rem(14, 16px);
  font-weight: bold;
  margin: 5px 0;
  text-align: left;
}
@media (min-width: 992px) {
  .tile-hd h4 {
    font-size: 1rem;
  }
}

/* back, initially hidden pane */
.back {
  transform: rotateY(180deg);
}

.item-btn-close {
  right: 10px;
  top: 15px;
  position: absolute;
  height: 1rem;
  width: 1rem;
}
.item-btn-close:after, .item-btn-close:before {
  border-left: 2px solid #fff;
  content: "";
  height: 1rem;
  left: 50%;
  position: absolute;
  top: 0;
}
.item-btn-close:after {
  transform: rotate(45deg);
}
.item-btn-close:before {
  transform: rotate(-45deg);
}
.item-btn-close:hover:after, .item-btn-close:hover:before {
  border-color: #fff;
}
</style>
</head>

<body translate="no" >
  <div class="item-list">
<div class="item col-sm-4 item-sort">
<div class="item-wrap">
      <div class="flip-container">
        <div class="flipper">
          <div class="front">
            <img src="https://mikeboardley.com/portfolio/code-pen/images/pic-1.jpg" />
            <div class="item-banner">
              <a class="item-link-likes" href="#" title="View Likes for Item #2n89"><strong class="item-like-count">5</strong> Likes</a>
            </div>
            <!-- /.item-banner -->  
          </div>
          <!-- front content -->
          <div class="back">
            <div class="tile-hd">
              <h4>People who like this:</h4>
              <a class="item-btn-close" aria-label="Close" href="#" title="Close"><span class="sr-only">Close Like Lists</span></a>
            </div>

            <div class="tile-content">
              <ul class="list-basic">
                <li>Item Like #1</li>
                <li>Item Like #2</li>
                <li>Item Like #3</li>
                <li>Item Like #4</li>
                <li>Item Like #5</li>
                <li>Item Like #6</li>
                <li>Item Like #7</li>
                <li>Item Like #8</li>
              </ul>
            </div>
            <!-- /.tile-content -->
            <!-- /.list-basic -->
          </div>
          <!-- back content -->
        </div>
      </div>
    </div>
    <!-- /.item-wrap -->
  </div>
  <!-- /.item -->
  <div class="item col-sm-4 item-sort">
  <div class="item-wrap">
      <div class="flip-container">
        <div class="flipper">
          <div class="front">
            <img src="https://mikeboardley.com/portfolio/code-pen/images/pic-2.jpg"" />
            <div class="item-banner">
              <a class="item-link-likes" href="#" title="View Likes for Item #2n89"><strong class="item-like-count">14</strong> Likes</a>
            </div>
            <!-- /.item-banner -->
          </div>
          <!-- front content -->
          <div class="back">
            <div class="tile-hd">
              <h4>People who like this:</h4>
              <a class="item-btn-close" aria-label="Close" href="#" title="Close"><span class="sr-only">Close Like Lists</span></a>
            </div>

            <div class="tile-content">
              <ul class="list-basic">
                <li>Item Like #1</li>
                <li>Item Like #2</li>
                <li>Item Like #3</li>
                <li>Item Like #4</li>
                <li>Item Like #5</li>
                <li>Item Like #6</li>
                <li>Item Like #7</li>
                <li>Item Like #8</li>
              </ul>
            </div>
            <!-- /.tile-content -->
            <!-- /.list-basic -->
          </div>
          <!-- back content -->                      </div>
        </div>
      </div>
      <!-- /.item-wrap -->
    </div>
    <!-- /.item -->
    <div class="item col-sm-4 item-sort">
  <div class="item-wrap">
      <div class="flip-container">
        <div class="flipper">
          <div class="front">
            <img src="https://mikeboardley.com/portfolio/code-pen/images/pic-3.jpg"" />
            <div class="item-banner">
              <a class="item-link-likes" href="#" title="View Likes for Item #2n89"><strong class="item-like-count">14</strong> Likes</a>
            </div>
            <!-- /.item-banner -->
          </div>
          <!-- front content -->
          <div class="back">
            <div class="tile-hd">
              <h4>People who like this:</h4>
              <a class="item-btn-close" aria-label="Close" href="#" title="Close"><span class="sr-only">Close Like Lists</span></a>
            </div>

            <div class="tile-content">
              <ul class="list-basic">
                <li>Item Like #1</li>
                <li>Item Like #2</li>
                <li>Item Like #3</li>
                <li>Item Like #4</li>
                <li>Item Like #5</li>
                <li>Item Like #6</li>
                <li>Item Like #7</li>
                <li>Item Like #8</li>
              </ul>
            </div>
            <!-- /.tile-content -->
            <!-- /.list-basic -->
          </div>
          <!-- back content -->                      </div>
        </div>
      </div>
      <!-- /.item-wrap -->
    </div>
    <!-- /.item -->
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://use.fontawesome.com/5cac28789a.js'></script>
      <script id="rendered-js" >
$(document).ready(function () {

  $('.item-link-likes').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.flip-container').toggleClass('hover');
  });

  $('.tile-hd .item-btn-close').on('click', function (e) {
    e.preventDefault();
    $(this).parents('.flip-container').toggleClass('hover');
  });

});
    </script>
</body>
</html>

12. Social icon flip cards

Made by Roman. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
:root {
	--black: #101010;
	--red: #ed4c5c;
}

*,
*:before,
*:after {
	box-sizing: border-box;
	text-decoration: none;
	list-style-type: none;
}
body {
	font-family: "Lato", serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--black);
	background-color: antiquewhite;
	margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}
/* ^ code ===============================================================*/
.wrap {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	background-color: #21252b;
}
.cardBox {
	perspective: 500px;
	margin: 15px;
	cursor: pointer;
	transition: transform 0.9s ease;
}
.cardBox:hover .card {
	transform: rotateY(180deg);
}
.card {
	position: relative;
	width: 150px;
	height: 150px;
	background: #fff;
	transform-style: preserve-3d;
	transition: 0.5s ease;
	box-shadow: 0 30px 30px rgba(0, 0, 0, 0.5);
}
.facebook {
	background-color: #3b5999;
}
.twitter {
	background-color: #55acee;
}
.google {
	background-color: #dd4b39;
}
.card-front,
.card-back {
	display: flex;
	justify-content: center;
	align-items: center;

	position: absolute;
	top: 0;
	left: 0;
	width: 150px;
	height: 150px;
	color: #fff;
	backface-visibility: hidden;
}
.card-front {
	font-size: 35px;
}
.fa {transform: initial;}
.card-back {
	font-size: 25px;

	transform: rotateY(180deg);
}
</style>
</head>
<body>
  <div class="wrap">
		<div class="cardBox">
			<div class="card facebook">
				<div class="card-front "><i class="fab fa-facebook-f"></i></div>
				<div class="card-back">Facebook</div>
			</div>
		</div>
		<div class="cardBox">
			<div class="card twitter">
				<div class="card-front "><i class="fab fa-twitter"></i></div>
				<div class="card-back">Twitter</div>
			</div>
		</div>
		<div class="cardBox">
			<div class="card google">
				<div class="card-front"><i class="fab fa-google-plus-g"></i></i></div>
				<div class="card-back">Google+</div>
			</div>
		</div>
	</div>
	<script src="https://kit.fontawesome.com/d2bf9093e0.js" crossorigin="anonymous"></script>
	</div>
</body>
</html>
 

13. CSS Animal Flip Cards

Made by Su. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - flip cards</title>
<style>
* {
  box-sizing: border-box;
}

#main {
  width: 100%;
  height: 100vh;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
}
#main .cards {
  width: 800px;
  display: flex;
  flex-wrap: wrap;
}
#main .cards .card {
  flex: 1;
  height: 200px;
  margin: 20px;
  cursor: pointer;
  transition: transform 0.5s;
  transform-style: preserve-3d;
  position: relative;
  perspective: 800px;
}
#main .cards .card .front1 {
  background-image: url(https://i.imgur.com/H598R5e.png);
}
#main .cards .card .front2 {
  background-image: url(https://i.imgur.com/IzctiYq.png);
}
#main .cards .card .front3 {
  background-image: url(https://i.imgur.com/YzCeoa2.png);
}
#main .cards .card .front4 {
  background-image: url(https://i.imgur.com/n6HPC2A.png);
}
#main .cards .card .back1 {
  background-image: url(https://image.flaticon.com/icons/svg/334/334928.svg);
}
#main .cards .card .back2 {
  background-image: url(https://image.flaticon.com/icons/svg/334/334924.svg);
}
#main .cards .card .back3 {
  background-image: url(https://image.flaticon.com/icons/svg/334/334941.svg);
}
#main .cards .card .back4 {
  background-image: url(https://image.flaticon.com/icons/svg/334/334892.svg);
}
#main .cards .card .back {
  transform: rotateY(180deg);
}
#main .cards .card > div {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 5px;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-color: #2196f3;
}
#main .cards .card.flip {
  transform: rotateY(180deg);
}
</style>
</head>
<body>
  <div id="main">
  <div class="cards">
    <div class="card">
      <div class="front1"></div>
      <div class="back back1"></div>
    </div>
    <div class="card">
      <div class="front2"></div>
      <div class="back back2"></div>
    </div>
    <div class="card">
      <div class="front3"></div>
      <div class="back back3"></div>
    </div>
    <div class="card">
      <div class="front4"></div>
      <div class="back back4"></div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script id="rendered-js" >
$(function () {
  $(".card").on("click", function () {
    $(this).toggleClass("flip");
  });
});
    </script>
</body>
</html>

14. Beautiful looking css flip cards

Made by CodeCreature. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:[email protected];300&display=swap");
body {
  font-family: "Roboto", system-ui, sans-serif;
  background-color: #282a36;
  background-image: radial-gradient(#343747 1px, #282a36 1px);
  background-size: 10px 10px;
  padding: 0 0 40px 0;
  text-align: center;
}

div {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

h2 {
  display: block;
  color: #fff;
  font-weight: 100;
  font-size: 30px;
  text-transform: uppercase;
  margin: 20px 0 30px 0;
}

.card {
  display: inline-block;
  position: relative;
  width: 300px;
  height: 420px;
  border-radius: 10px;
  padding: 5px;
  margin: 0 30px 30px 0;
  background: transparent;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  border: solid 3px rgba(255, 255, 255, 0.4);
  background: #353535;
  transition: transform 1s;
  transform-style: preserve-3d;
  cursor: pointer;
}
.card.flipped {
  transform: rotateY(180deg);
}
.card .card-inner {
  position: absolute;
  top: 5px;
  right: 5px;
  bottom: 5px;
  left: 5px;
  background: #fff url("https://images.unsplash.com/photo-1505312926838-645f295a20e1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80") no-repeat;
  background-size: cover;
  border-radius: 6px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.card .card-inner.frontside {
  border: solid 1px #555;
}
.card .card-inner.frontside img {
  width: 100%;
  height: auto;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.card .card-inner.frontside .card-inner-content {
  position: absolute;
  bottom: 40px;
  padding: 30px;
  color: #fff;
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.7);
  font-weight: 300;
}
.card .card-inner.frontside .card-inner-content h3 {
  margin: 0 0 10px 0;
  text-transform: uppercase;
  font-size: 34px;
  font-weight: 100;
}
.card .card-inner.backside {
  background: #242424;
  background: -moz-linear-gradient(-45deg, #242424 0%, #050505 50%, #111111 50%, #111111 100%);
  background: -webkit-linear-gradient(-45deg, #242424 0%, #050505 50%, #111111 50%, #111111 100%);
  background: linear-gradient(135deg, #242424 0%, #050505 50%, #111111 50%, #111111 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#242424", endColorstr="#111111",GradientType=1 );
  transform: rotateY(180deg);
}
.card .card-inner .card-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.5);
  padding: 5px 0;
  text-align: center;
  border-bottom-right-radius: 6px;
  border-bottom-left-radius: 6px;
}
.card.two .card-inner {
  background: #fff url("https://images.unsplash.com/photo-1532767153582-b1a0e5145009?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80") no-repeat;
  background-size: cover;
  background-position: center top;
}
.card.two .card-inner.backside {
  background: #fff url("https://images.unsplash.com/photo-1537633897826-63d7be9136ad?ixid=MnwxMjA3fDB8MHxzZWFyY2h8OTZ8fG1vb258ZW58MHx8MHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60") no-repeat;
  background-size: cover;
  background-position: center center;
}
</style>
</head>

<body translate="no" >
  <h2>CSS Flip Cards</h2> 

<div class="card">
    <div class="card-inner frontside">
        <div class="card-inner-content">
            <h3>Flip Card #1</h3>
            This is a card you can flip by clicking on it :) 
        </div>
        <div class="card-footer">
            Photo by Adrian Pelletier @ Unsplash
        </div>
    </div>
    <div class="card-inner backside"></div>
</div>


<div class="card two">
    <div class="card-inner frontside">
        <div class="card-inner-content">
            <h3>Flip Card #2</h3>
            Flip this card to see the moon &#10084;
        </div>
        <div class="card-footer">
            Photo by Altınay Dinç @ Unsplash
        </div>
    </div>
    <div class="card-inner backside">
        <div class="card-footer">
            Photo by Prince Abid @ Unsplash
        </div>
    </div>
</div>
      <script id="rendered-js" >
var cards = document.getElementsByClassName('card');

Array.prototype.forEach.call(cards, function (el, index, array) {
  el.addEventListener('click', function () {
    el.classList.toggle('flipped');
  });
});
    </script>
</body>
</html>

15. Flip Cards Fixed Size

Made by Dod. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  color: black;
  background: none;
  text-align: center;
  font-family: 'Arial';
  padding: 1em;
}
h2 {
  font-size: 2.2em;
}
p {
        font-size: 1.4rem;
        line-height: 160%;
        color: #fff;
      }
/* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-box {
	position: relative;
  display: inline-block;
	margin-right: 1em;
  margin-bottom: 1em;
  background-color: transparent;
  width: 400px;
  height: 300px;
  border: 1px solid #f1f1f1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

/* This container is needed to position the front and back side */
.flip-box-inner {
  position: relative;
	width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-box:hover .flip-box-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */
.flip-box-front, .flip-box-back {
  position: absolute;
	background-size: cover!important;
  background-position: center!important;
  width: 100%;
  height: 100%;
	border-radius: 10px;
	backface-visibility: hidden;
}

/* Style the front side (fallback if image is missing) */
.flip-box-front {
  background-color: #444;
  color: white;
}

/* Style the back side */
.flip-box-back {
  background-color: #666;
  color: white;
  transform: rotateY(180deg);
}
</style>
</head>
<body>
  <div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front" style="background-image: url(https://images.pexels.com/photos/540518/pexels-photo-540518.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb)">     
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>

<div class="flip-box">
  <div class="flip-box-inner">
    <div class="flip-box-front" style="background-image: url(https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?w=1260&h=750&dpr=2&auto=compress&cs=tinysrgb)">     
    </div>
    <div class="flip-box-back">
      <h2>Paris</h2>
      <p>What an amazing city</p>
    </div>
  </div>
</div>
</body>
</html>

16. Flip Card Effect On Hover

Made by WebsCodeMedia. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css2?family=Poppins,[email protected],700');

*,*::before,*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
  z-index: 1;
  background: linear-gradient(-45deg, #b5360f, #bd0b50, #085e7d, #0da984);
  background-size: 400% 400%;
  animation: linearGradient 15s ease infinite;
}
@keyframes linearGradient{
  0%{
    background-position: 0% 50%;
  }
  50%{
    background-position: 100% 50%;
  }
  100%{
    background-position: 0% 50%;
  }
}

.title{
  font-family: 'Poppins', sans-serif;
  font-size: 80px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 8px;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-shadow: 0 15px 8px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  text-transform: uppercase;
}

.flip_cards_section{
  position: relative;
  width: 80%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 30px;
  place-items: center;
  padding-top: 80px;
  cursor: pointer;
  margin: 0 auto;
}
.flip_card_cover{
  width: 100%;
  height: 320px;
  background: transparent;
  border-radius: 8px;
  perspective: 1000px;
}
.flip_card_inner{
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
  transform-style: preserve-3d;
  transition: transform .6s;
}
.top .flip_card_inner,
.bottom .flip_card_inner{
  box-shadow: 0 -19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
.front,
.back{
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.front img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.back{
  background: transparent;
  color:#fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotateY(180deg);
}
.top .back,
.bottom .back{
  transform: rotateX(180deg);
}
.card_title{
  font-size: 30px;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform: uppercase;
}
.caption{
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .2px;
  margin: 30px 0px;
  line-height: 1.2;
}
.btn{
  display: inline-block;
  background: transparent;
  border:0px;
  outline: 0px;
  font-size: 16px;
  color:#fff;
  padding: 12px 40px;
  border-radius: 50px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  text-transform: uppercase;
}
/* Right */
.flip_card_cover.right:hover .flip_card_inner{
  transform: rotateY(180deg);
}
/* left */
.flip_card_cover.left:hover .flip_card_inner{
  transform: rotateY(-180deg);
}
/* top */
.flip_card_cover.top:hover .flip_card_inner{
  transform: rotateX(-180deg);
}
/* bottom */
.flip_card_cover.bottom:hover .flip_card_inner{
  transform: rotateX(180deg);
}
</style>
<body>
  <h3 class="title">Flip Cards</h3>
<section class="flip_cards_section">
  <!-- Right -->
  <div class="flip_card_cover right">
    <div class="flip_card_inner">
      <div class="front">
        <img src="https://i.ibb.co/ZgJ8n0W/card1.jpg" />
      </div>
      <div class="back"> 
        <h1 class="card_title">Fashion</h1>
        <p class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <button class="btn">More..</button>
      </div>
    </div>
  </div>
  <!-- Left -->
  <div class="flip_card_cover left">
    <div class="flip_card_inner">
      <div class="front">
        <img src="https://i.ibb.co/R75MBnq/card2.jpg" />
      </div>
      <div class="back">
        <h1 class="card_title">Fashion</h1>
        <p class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <button class="btn">More..</button>
      </div>
    </div>
  </div>
  <!-- top -->
  <div class="flip_card_cover top">
    <div class="flip_card_inner">
      <div class="front">
        <img src="https://i.ibb.co/DzHmyWp/card3.jpg" />
      </div>
      <div class="back">
        <h1 class="card_title">Fashion</h1>
        <p class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <button class="btn">More..</button>
      </div>
    </div>
  </div>
  <!-- bottom -->
  <div class="flip_card_cover bottom">
    <div class="flip_card_inner">
      <div class="front">
        <img src="https://i.ibb.co/mtxzYf8/card4.jpg" />
      </div>
      <div class="back">
        <h1 class="card_title">Fashion</h1>
        <p class="caption">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <button class="btn">More..</button>
      </div>
    </div>
  </div>
</section>
</body>
</html>

17. Product Flip cards

Made by F. A. Rodrigues. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:200,400');

/* ------ START CSS RESET ------ */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ------ END CSS RESET ------ */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit; 
}

a:link,
a:visited {
  color: #000;
  text-decoration: none;
}

body {
  font-family: 'Montserrat', sans-serif;
  font-size: 62.5%;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: .08rem;
}

.pricing {
  text-align: center;
  padding: 4rem;
  background-color: #eee;
}

.row {
  max-width: 60rem;
  margin: 0 auto; 
}
.row:not(:last-child) { margin-bottom: 8rem; }

.row::after {
  content: "";
  display: table;
  clear: both; 
}

.row [class^="col-"] { float: left; }
.row [class^="col-"]:not(:last-child) { margin-right: 3rem; }

.row .col-1-of-3 { width: 18rem; }

.card {
  -moz-perspective: 300rem;
  perspective: 300rem;
  position: relative;
  height: 30rem;
  border-radius: 5px;
  backface-visibility: hidden;
}

.card__side {
  height: 30rem;
  transition: all 1s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15); }

.card__side--front {
  background-color: #fff; }
 
.card__side--back {
  transform: rotateY(180deg); }

.card__side--back-1 {
  background-image: linear-gradient(to right bottom, #ffc93c, #f07b3f); }

.card__side--back-2 {
  background-image: linear-gradient(to right bottom, #30e3ca, #11999e); }

.card__side--back-3 {
  background-image: linear-gradient(to right bottom, #e84545, #903749); }

.card:hover .card__side--front {
    transform: rotateY(-180deg); }

.card:hover .card__side--back {
  transform: rotateY(0); }

.card__pic {
  width: calc(100% - 2rem);
  height: 10rem;
  margin-bottom: 2rem;
  padding: 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  background-size: cover;
}

.card__pic--1 {
  background-image: url('https://source.unsplash.com/rumn3j2jTa4/600x400');
}

.card__pic--2 {
  background-image: url('https://source.unsplash.com/CfhwQ2ZTaRY/600x400'); 
}

.card__pic--3 {
  background-image: url('https://source.unsplash.com/T7MS6msFRwg/600x400'); 
}

.card__heading {
  position: absolute;
  top: 8rem;
  right: 1rem;
  color: #fff;
  width: 65%;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: right;
  text-transform: uppercase;
}

.card__heading span {
  padding: .3rem 1.5rem;
  box-decoration-break: clone;
}

.card__h-span-1 { background-image: linear-gradient(to right bottom, rgba(255, 201, 60, 0.8), rgba(240, 123, 63, 0.8)); }

.card__h-span-2 { background-image: linear-gradient(to right bottom, rgba(48, 227, 202, 0.8), rgba(17, 153, 158, 0.8)); }

.card__h-span-3 { background-image: linear-gradient(to right bottom, rgba(232, 69, 69, 0.8), rgba(144, 55, 73, 0.8)); }

span.card__span-mountain {
  font-size: 1.2rem;
  padding: 0;
}

.card__details {
  color: #777;
  font-size: .9rem;
  margin-top: -5rem;
  padding-top: 6rem;
  padding-bottom: 1rem;
}
.card__details ul {
  width: 60%;
  margin: auto;
}

.card__details li:not(:last-child) {
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid #ddd;
}

.card__side2-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card__price {
  color: #fff;
  font-size: .8rem;
  font-weight: 300;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 4rem;
}

.card__price-value {
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1.6;
}

.btn {
  display: inline-block;
  font-size: 1rem;
  text-transform: uppercase;
  padding: .8rem 1.6rem;
  border-radius: 2rem;
}

.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}

.btn:active,
.btn:focus {
  transform: translateY(0);
}

.btn--white {
  background-color: #fff;
}
</style>
</head>
<body>
  <section class="pricing">
  <div class="row">
    <div class="col-1-of-3">
      <div class="card">
        <div class="card__side card__side--front card__side--front-1">
          <div class="card__pic card__pic--1"></div>
          <h4 class="card__heading">
            <span class="card__h-span-1">Road Bikes</span>
          </h4>
          <div class="card__details">
            <ul>
              <li>Skinny tires</li>
              <li>On-road racing</li>
              <li>Paved trails</li>
              <li>Very light</li>
              <li>Very fast</li>
            </ul>
          </div>
        </div>
        <div class="card__side card__side--back card__side--back-1">
          <div class="card__side2-content">
            <h4 class="card__price">
              <p class="card__price-only">Only</p> 
              <p class="card__price-value">$999</p>
            </h4>
            <a href="" class="btn btn--white">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-1-of-3">
      <div class="card">
        <div class="card__side card__side--front card__side--front-1">
          <div class="card__pic card__pic--2"></div>
          <h4 class="card__heading">
            <span class="card__h-span-2"><span class="card__span-mountain">Mountain</span> Bikes</span>
          </h4>
          <div class="card__details">
            <ul>
              <li>Flat handlebars</li>
              <li>Full-suspension</li>
              <li>Wide tires</li>
              <li>Hydraulic breaks</li>
              <li>26'</li>
            </ul>
          </div>
        </div>
        <div class="card__side card__side--back card__side--back-2">
          <div class="card__side2-content">
            <h4 class="card__price">
              <p class="card__price-only">Only</p> 
              <p class="card__price-value">$1999</p>
            </h4>
            <a href="" class="btn btn--white">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-1-of-3">
      <div class="card">
        <div class="card__side card__side--front card__side--front-1">
          <div class="card__pic card__pic--3"></div>
          <h4 class="card__heading">
            <span class="card__h-span-3">City Bikes</span>
          </h4>
          <div class="card__details">
            <ul>
              <li>Ergonomic</li>
              <li>Lightweight</li>
              <li>Carbon front</li>
              <li>Mudquarded</li>
              <li>+ Carrier</li>
            </ul>
          </div>
        </div>
        <div class="card__side card__side--back card__side--back-3">
          <div class="card__side2-content">
            <h4 class="card__price">
              <p class="card__price-only">Only</p> 
              <p class="card__price-value">$499</p>
            </h4>
            <a href="" class="btn btn--white">Buy Now</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
</body>
</html>

18. Travel Destinations Flip Card

Made by Ann H. Travel destination theme flip cards. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,600" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<style>
body {
  font-family: "Montserrat", sans-serif;
  background-color: #222;
  margin: 0 auto;
  text-align: center;
  height: 100%;
}

* {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wall:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(https://images.unsplash.com/photo-1535498730771-e735b998cd64?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=623ed05afcc5a3fa1e444ffca95854dc&auto=format&fit=crop&w=2134&q=80);
  z-index: -1;
  filter: blur(8px);
  -webkit-filter: blur(8px);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-box {
  margin: 0 auto;
  padding: 20px 0;
  background-color: #ffebee;
  width: 800px;
  height: 100%;
  min-width: 650px;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.5);
}

.wrapper {
  margin: 0 auto;
  padding-top: 30px;
  height: 100%;
}

.top {
  text-align: center;
  margin: 0 auto;
}

.top p {
  font-size: 2.5em;
  font-weight: 600;
  color: #880e4f;
  margin-top: 20px;
}

h3 {
  color: #880e4f;
}

.card-row {
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  min-width: 650px;
  max-width: 800px;
}

.card {
  background-color: transparent;
  width: 200px;
  height: 180px;
  perspective: 1000px;
  margin: auto;
}

.card-contain {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.8s;
  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}

.card:hover .card-contain {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.card-front {
  background-color: #fff;
  color: #000;
  z-index: 2;
}

.card-back {
  color: #fff;
  transform: rotateY(180deg);
  z-index: 1;
}

.bk1,
.bk2,
.bk3 {
  background-color: #880e4f;
}

.img-contain {
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 50%;
  margin-top: 20px;
}

.paris,
.london,
.tokyo {
  display: inline;
}

.paris {
  margin-top: -20px;
  width: 100px;
}

.london {
  width: 150px;
}

.tokyo {
  width: 150px;
}

.text-wrap {
  height: 40px;
  width: 180px;
  overflow: hidden;
  margin-top: 10px;
}

.city {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
}

.country {
  margin: 0;
  font-weight: 400;
  font-size: 12px;
}

.icon-wrap {
  margin: auto;
  height: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  font-size: 3em;
  color: #fff;
}

.icon-red {
  font-size: 2em;
  color: #880e4f;
  margin-bottom: -25px;
}

.generator {
  margin: auto;
  margin-top: 20px;
  padding: 20px;
  display: flex;
  justify-content: center;
}

#textField {
  width: 400px;
  height: 50px;
  background-color: #fff;
  color: #000;
  font-size: 1.5em;
  font-weight: 600;
  margin: 0 0 25px 0;
  padding: 10px;
}

button {
  background-color: #fff;
  border: none;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  padding: 10px;
  box-shadow: 0 6px 15px 0 rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

button:hover {
  background-color: #880e4f;
  color: #fff;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.social {
  margin: 0 auto;
  padding: 40px;
  font-weight: 600;
  color: #880e4f;
}

.fab {
  margin: 0 10px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  border-radius: 50%;
}

hr {
  margin-top: 20px;
  width: 50%;
  border: 2px solid #880e4f;
}

.fa-facebook-f,
.fa-twitter,
.fa-linkedin-in {
  background-color: #000;
  transition: all 0.25s ease-out;
  -webkit-transition: all 0.25s ease-out;
}

.fa-facebook-f:hover,
.fa-twitter:hover,
.fa-linkedin-in:hover {
  background-color: #880e4f;
  transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
}

.merkund {
  font-size: 0.85em;
}
</style>
</head>

<body>
  <!--2018.11.09 by @merkund-->
<!--Travel destinations referenced from https://www.bestcities.org/rankings/worlds-best-cities/ -->
<body>
  <div class="wall">
    <div class="bg-box">
      <div class="wrapper">
        <div class="top">
          <i class="fas fa-plane icon-red"></i>
          <p>Go here if you like:</p>
        </div>
        <div class="card-row">
          <!--CARD: START-->
          <div class="card">
            <div class="card-contain">
              <div class="card-front">
                <div class="img-contain">
                  <img class="paris" src="https://images.unsplash.com/photo-1533248984150-b6ba09089d8c?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=88d52ec439d05ff70e500d55ffccf724" alt="Paris">
                </div>
                <div class="text-wrap">
                  <p class="city">Paris</p>
                  <p class="country">Île-de-France, France</p>
                </div>
              </div>
              <div class="card-back bk1">
                <div class="icon-wrap">
                  <span class="icon">
             <i class="fas fa-archway"></i>
           </span>
                  <p>Classy<br/>Architecture</p>
                </div>
              </div>
            </div>
          </div>
          <!--CARD: END-->

          <!--CARD: START-->
          <div class="card">
            <div class="card-contain">
              <div class="card-front">
                <div class="img-contain">
                  <img class="london" src="https://images.unsplash.com/photo-1532444143931-9f60a76242e7?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=fd430fdacfad0a21f6eb8679025b624d" alt="London">
                </div>
                <div class="text-wrap">
                  <p class="city">London</p>
                  <p class="country">England, UK</p>
                </div>
              </div>
              <div class="card-back bk2">
                <div class="icon-wrap">
                  <span class="icon">
             <i class="fas fa-shopping-bag"></i>
           </span>
                  <p>Shopping</p>
                </div>
              </div>
            </div>
          </div>
          <!--CARD: END-->

          <!--CARD: START-->
          <div class="card">
            <div class="card-contain">
              <div class="card-front">
                <div class="img-contain">
                  <img class="tokyo" src="https://images.unsplash.com/photo-1533050487297-09b450131914?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e78ce1563ad622d8699d2238fc0a3f03" alt="Tokyo">
                </div>
                <div class="text-wrap">
                  <p class="city">Tokyo</p>
                  <p class="country">Kantō, Japan</p>
                </div>
              </div>
              <div class="card-back bk3">
                <div class="icon-wrap">
                  <span class="icon">
             <i class="fas fa-utensils"></i>
           </span>
                  <p>Delicious<br/>Food</p>
                </div>
              </div>
            </div>
          </div>
          <!--CARD: END-->
        </div>

        <!--Generator: START-->
        <div class="generator">
          <div>
            <h3>Or, if you can't decide at all,<br/> use our destination generator:</h3>
            <div id="textField">
            </div>
            <button onclick="newCity()">Let's go!</button>
          </div>
          <!--Generator: END-->
          <script src="javascript.js"></script>
        </div>
        <div class="social">
          <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//codepen.io/merkund/pen/OaNJNE" target="_blank"><i class="fab fa-facebook-f"></i></a>
          <a href="https://twitter.com/home?status=https%3A//codepen.io/merkund/pen/OaNJNE%20-%20Travel%20Destination%20Mock-up%20by%20Anno%20H.%20(by%20the%20way,%20it's%20awesome!)" target="_blank"><i class="fab fa-twitter"></i></a>
          <a href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A//codepen.io/merkund/pen/OaNJNE&title=Check%20out%20this%20project!&summary=Travel%20Destination%20Mock-up%20by%20Anno%20H.%20(by%20the%20way,%20it's%20awesome!)&source=" target="_blank"><i class="fab fa-linkedin-in"></i></a>
          <hr/>
          <p>Share it!</p>
          <p class="merkund">@Merkund</p>
        </div>

      </div>
    </div>
  </div>
</body>
      <script id="rendered-js" >
var cityArray = [
"London, England",
"Paris, France",
"New York, US",
"Tokyo, Japan",
"Barcelona, Spain",
"Moscow, Russia",
"Chicago, US",
"Singapore",
"Dubai, United Arab States",
"San Francisco, US",
"Madrid, Spain",
"Amsterdam, The Netherlands",
"Los Angeles, US",
"Rome, Italy",
"Boston, USA",
"San José, US",
"Toronto, Canada",
"Washington, US",
"Zurich, Switzerland",
"Hong Kong, China",
"Beijing, China",
"Berlin, Germany",
"Sydney, Australia",
"Las Vegas, US",
"Frankfurt, Germany",
"Miami, US",
"San Diego, US",
"Seoul, South Korea",
"Prague, Czechia",
"Munich, Germany",
"Houston, US",
"Milan, Italy",
"Dublin, Ireland",
"Seattle, USA",
"Dallas, US",
"Istanbul, Turkey",
"Vancouver, Canada",
"Melbourne, Australia",
"Vienna, Austria",
"Abu Dhabi, United Arab States",
"Calgary, Canada",
"Brussels, Belgium",
"Denver, US",
"Doha, Qatar",
"Oslo, Norway",
"Orlando, US",
"Austin, US",
"Stockholm, Sweden",
"Montreal, Canada",
"Philadelphia, US",
"Brisbane, Australia",
"Atlanta, US",
"Copenhagen, Denmark",
"St. Petersburg, Russia",
"Perth, Australia",
"Minneapolis, US",
"Lisbon, Portugal",
"Venice, Italy",
"Portland, US",
"Hamburg, Germany",
"Tel Aviv, Israel",
"Lyon, France",
"Florence, Italy",
"Stuttgart, Germany",
"Luxembourg, Luxembourg",
"Edmonton, US",
"Osaka, Japan",
"Auckland, New Zealand",
"Ottawa, Canada",
"Budapest, Hungary",
"Helsinki, Finland",
"Athens, Greece",
"Cologne, Germany",
"Bangkok, Thailand",
"Charlotte, US",
"Phoenix, US",
"New Orleans, US",
"Baltimore, US",
"Valencia, Spain",
"Manchester, England",
"Liverpool, England",
"Szczecin, Poland",
"Nashville, US",
"Düsseldorf, Germany",
"São Paulo, Brazil",
"Rio de Janeiro, Brazil",
"Warsaw, Poland",
"Marseille, France",
"Birmingham, England",
"Shanghai, China"];


function newCity() {
  var randomNumber = Math.floor(Math.random() * cityArray.length);
  document.getElementById("textField").innerHTML = cityArray[randomNumber];
}
    </script>
</body>
</html>

19. Blog Flip Cards

Made by Simja. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  
<style>
.card {
  margin: 10px 10px;
}

/* Flip Cards CSS */
.card-container {
  display: grid;
  perspective: 700px;
}

.card-flip {
  display: grid;
  grid-template: 1fr / 1fr;
  grid-template-areas: "frontAndBack";
  transform-style: preserve-3d;
  transition: all 0.7s ease;
}

.card-flip div {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.front {
  grid-area: frontAndBack;
}

.back {
  grid-area: frontAndBack;
  transform: rotateY(-180deg);
}

.card-container:hover .card-flip {
  transform: rotateY(180deg);
}

.social-box i {
  border: 1px solid #DFC717;
  color: #DFC717;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
  margin-top: 3%;
  margin-bottom: 9%;
}
.social-box i:hover {
  background: #DFC717;
  color: #fff;
}
.social-box a {
  margin: 0 5px;
}.social-box i {
  border: 1px solid #DFC717;
  color: #DFC717;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  line-height: 30px;
}
.social-box i:hover {
  background: #DFC717;
  color: #fff;
}
.social-box a {
  margin: 0 5px;
}

.card-img-top {
  width: 100%;
  height: 300px;
}
</style>
</head>
<body>
  <div class="container">
  <div class="row">
          <!-- Card 1 -->
    <div class="col-md-4 card-container">
      <div class="card-flip">
        <!-- Card 1 Front -->
           <div class="card front">
          <img src="https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Front Card Title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <!-- End Card 1 Front -->

        <!-- Card 1 Back -->
       <div class="card back text-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 1 Back -->
      </div>
    </div>
    <!-- End Card 1 -->

    <!-- Card 2 -->
    <div class="col-md-4 card-container">
      <div class="card-flip">
        <!-- Card 2 Front -->
        <div class="card front">
          <img src="https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Front Card Title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <!-- End Card 2 Front -->

        <!-- Card 2 Back -->
          <div class="card back text-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 2 Back -->
      </div>
    </div>
    <!-- End Card 2 -->

    <!-- Card 3 -->
    <div class="col-md-4 card-container">
      <div class="card-flip">
        <!-- Card 3 Front -->
      <div class="card front">
          <img src="https://nikonrumors.com/wp-content/uploads/2014/03/Nikon-1-V3-sample-photo.jpg" class="card-img-top img-fluid">
          <div class="card-block">
            <h4 class="card-title">Front Card Title</h4>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
          </div>
        </div>
        <!-- End Card 3 Front -->

        <!-- Card 3 Back -->
         <div class="card back text-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 3 Back -->
      </div>
    </div>
    <!-- End Card 3 -->

    <!-- Card 4 -->
    <div class="col-md-4 card-container">
      <div class="card-flip">
        <!-- Card 4 Front -->
          <div class="card front card-inverse">
          <img class="card-img img-fluid" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg" alt="Card image">
          <div class="card-img-overlay">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             <span class="social-box">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>
                <a href="#"><i class="fa fa-dribbble"></i></a>
                <a href="#"><i class="fa fa-behance"></i></a>
            </span>
          </div>
        </div>
        <!-- End Card 4 Front -->

        <!-- Card 4 Back -->
          <div class="card back text-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
             <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 4 Back -->
      </div>
    </div>
    <!-- End Card 4 -->

    <!-- Card 5 -->
    <div class="col-md-4 card-container">
      <div class="card-flip">
        <!-- Card 5 Front -->
        <div class="card front card-inverse">
          <img class="card-img-top" src="https://images.pexels.com/photos/247599/pexels-photo-247599.jpeg?h=350&auto=compress&cs=tinysrgb">
          <div class="card-img-overlay">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
          </div>
        </div>
        <!-- End Card 5 Front -->

        <!-- Card 5 Back -->
          <div class="card back text-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
             <span class="social-box">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>
                <a href="#"><i class="fa fa-dribbble"></i></a>
                <a href="#"><i class="fa fa-behance"></i></a>
            </span>
            <br />
            <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 5 Back -->
      </div>
    </div>
    <!-- End Card 5 -->

    <!-- Card 6 -->
    <div class="col-md-4 card-container">
      <div class="card-flip">
        <!-- Card 6 Front -->
        <div class="card front card-inverse">          
          <img class="card-img-top" src="http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-300mmf_35-56g_ed_vr/img/sample/sample4_l.jpg?h=350&auto=compress&cs=tinysrgb alt="Card image">
          <div class="card-img-overlay">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             <a href="#" class="btn btn-primary">Go somewhere</a>
          </div>
        </div>
        <!-- End Card 6 Front -->

        <!-- Card 6 Back -->
           <div class="card back text-center">
          <div class="card-header">
            Featured
          </div>
          <div class="card-block">
            <h4 class="card-title">Special title treatment</h4>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
             <span class="social-box">
                <a href="#"><i class="fa fa-facebook"></i></a>
                <a href="#"><i class="fa fa-twitter"></i></a>
                <a href="#"><i class="fa fa-google-plus"></i></a>
                <a href="#"><i class="fa fa-dribbble"></i></a>
                <a href="#"><i class="fa fa-behance"></i></a>
            </span>
          </div>
        </div>
        <!-- End Card 6 Back -->
      </div>
    </div>
    <!-- End Card 6 -->
  </div>
</div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
</body>
</html>

20. Pokémon flip cards

Made by Siu Soan. Pokémon flip cards with sound on click. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title> </title>
<style>
/*Work in progress*/ 

body {
  background: slategray; 
  font-family: helvetica; 
}

h1 {
  font-size: 2em;
  color: white; 
  text-align: center;
  margin-top: 100px;
}

.choose{
  font-size: 1em;
  font-weight: normal; 
  color: white; 
  text-align: center;
}

.frame {
  width: 800px;
  height: 350px; 
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1%; 
  box-shadow: 10px 10px 0.5px rgba(0, 0, 0, 0.4);
  margin: 50px auto; 
}

/*defining 3D space for each card*/ 
.space {
  width: 200px; 
  height: 200px; 
  border-radius: 1%; 
  float: left;
  position: relative;
  margin: 75px 33.2px 120px 33.2px; 
  perspective: 800px;
}

.squares{
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

/*Front and back sides of each card*/ 
.front1 { 
  background: darkorange;
}

.back1 {
  background: darkorange url(http://assets.pokemon.com/assets/cms2/img/pokedex/full/004.png);
  background-size: cover; 
  transform: rotateY(180deg);
}

.front2 {
  background: dodgerblue; 
}

.back2 {
  background: dodgerblue url(http://assets.pokemon.com/assets/cms2/img/pokedex/full/007.png);
  background-size: cover; 
  transform: rotateY(180deg);
}

.front3 {
  background: mediumseagreen;
}

.back3 {
  background: mediumseagreen url(http://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png);
  background-size: cover;
  transform: rotateY(180deg);
}

/*Hover effect to flip cards*/ 
#one:hover, #two:hover, #three:hover {
  transform: rotateY(180deg);
}

/*Shapes/icons of each card*/ 
.flames, .droplets, .leaves {
  width: 200px;
  margin: 50px; 
}
.bigFlame, .bigDrop {
  width: 100px;
  height: 100px; 
  border-radius: 0 100px 110px 100px; 
  transform: rotate(45deg);
  background: orangered; 
}

.littleFlame, .littleDrop, .littleDrop2{
  width: 50px;
  height: 50px; 
  border-radius: 0 100px 110px 100px;
  transform: rotate(45deg);
  background: gold; 
  position: relative;
  margin: -50px 20px; 
}

.bigDrop {
  background: mediumblue; 
}

.littleDrop {
  background: lightskyblue;
  margin: -50px 50px;
}

.littleDrop2 {
  background: lightskyblue;
  margin: -100px -5px; 
}

.bigLe {
  width: 100px;
  height: 100px; 
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px; 
  transform: rotate(90deg);
  background: seagreen; 
}

.littleLe {
  width: 50px;
  height: 50px; 
  border-top-right-radius: 100px;
  border-bottom-left-radius: 100px; 
  transform: rotate(95deg);
  background: yellowgreen; 
  position: relative;
  margin: -50px 5px; 
}

/*Pokemon names of each card*/ 
.pokemon {
  color: white; 
  font-size: 1.6em;
  font-weight: bold; 
  text-align: center;
  margin: 150px auto; 
}

/*References*/ 

.refs {
  width: 350px;
  text-align: center;
  margin: 0 auto 50px auto; 
}

h2 {
  font-size: 1.1em; 
}

a {
  color: lightgrey; 
  text-decoration: none;
}
</style>
</head>

<body translate="no" >
  <h1>PICK YOUR POKÉMON</h1>
<h2 class="choose">(Click to choose)</h2>
<div class="frame">
    <div class="space"> 
          <div id="one" class="squares">
                <figure class="front1">
                      <div class="flames">
                          <div class="bigFlame">
                          </div> 
                          <div class="littleFlame">
                          </div> 
                      </div> 
                </figure> 

                <figure class="back1">
                          <p class="pokemon">CHARMANDER</p> 
                </figure>
          </div>
    </div> 

  
    <div class="space">
          <div id="two" class="squares">
                 <figure class="front2"> 
                        <div class="droplets">
                            <div class="bigDrop">
                            </div> 
                            <div class="littleDrop">
                            </div>
                            <div class="littleDrop2">
                            </div>  
                        </div>
                 </figure>
                  
                 <figure class="back2">
                            <p class="pokemon">SQUIRTLE</p> 
                 </figure> 

          </div>
    </div> 
  
  
  <div class="space"> 
        <div id="three" class="squares">
                  <figure class="front3">
                            <div class="leaves">
                                <div class="bigLe">
                                </div> 
                                <div class="littleLe">
                                </div> 
                            </div> 
                  </figure>

                  <figure class="back3">
                            <p class="pokemon">BULBASAUR</p> 
                  </figure> 
        </div> 
</div> 

  
<div class="refs">
      <h2>References</h2>
      <p>Flame and water droplet based on <a href="https://codepen.io/justinbatzel/pen/HKlqo">Justin Batzel</a>
      <p>Flipping cards based on <a href="https://desandro.github.io/3dtransforms/docs/card-flip.html">Desandro</a> 
</div>

  
  
<audio class="charmander">
  <source src="http://www.pokezorworld.com/anime/wav/charmander.wav"></source>
</audio>

<audio class="bulbasaur">
  <source src="http://www.pokezorworld.com/anime/wav/bulbasaur.wav"></source>
</audio>
  
      <script id="rendered-js" >
var cards = document.getElementsByClassName("squares");
var chrm = document.getElementsByClassName("charmander")[0];
var sqrtle = document.getElementsByClassName("squirtle")[0];
var blb = document.getElementsByClassName("bulbasaur")[0];

var counter = 0;
while (counter < cards.length) {if (window.CP.shouldStopExecution(0)) break;
  cards[0].onclick = function () {
    chrm.play();
  };
  cards[1].onclick = function () {
    alert("Sorry, couldn't find Squirtle sound :P");
  };
  cards[2].onclick = function () {
    blb.play();
  };
  counter++;
}window.CP.exitedLoop(0);
    </script>
</body>
</html>

21. Flip Cards

Made by Demetri Ganoff. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body {
  font-family: Helvetica, Arial, san-serif;
  text-align: center;
}

.flipper {
  position: relative;
  float: left;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  -webkit-perspective: 600px;
  -moz-perspective: 600px;
  margin: 2em;
  -webkit-box-reflect: below 3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.5)));
}
.flipper .pad {
  padding: 2em;
}
.flipper > div {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  width: inherit;
  height: inherit;
  color: white;
  border: 1px solid #ddd;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}
.flipper .front {
  background: #bbb;
  color: #333;
  z-index: 1000;
  -webkit-transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all .5s ease-in-out;
  -moz-transform: rotateY(0deg);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -moz-transition: all .5s ease-in-out;
}
.flipper .back {
  background: #333;
  z-index: 900;
  -webkit-transform: rotateY(-180deg) scale(1);
  -webkit-transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  -webkit-transition: all .5s ease-in-out;
  -moz-transform: rotateY(-180deg) scale(1);
  -moz-transform-style: preserve-3d;
  -moz-backface-visibility: hidden;
  -moz-transition: all .5s ease-in-out;
}
.flipper.flip {
  z-index: 9999;
}
.flipper.flip .front {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  z-index: 900;
  top: -2em;
}
.flipper.flip .back {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  z-index: 1000;
  top: -2em;
}
</style>
</head>

<body translate="no" >
  <h1>Flip!</h1>

<section class="flipper">
  
  <div class="front">
    <div class="pad">
      <h1>I am awesome!</h1>
      <p>Lets flip around...</p>
    </div>
  </div>
  
  <div class="back">
    <div class="pad">
      <h1>Yup, still awesome.</h1>
      <p>Flipped!</p>
    </div>
  </div>
  
</section>

<section class="flipper">
  
  <div class="front">
    <div class="pad">
      <h1>I am awesome!</h1>
      <p>Lets flip around...</p>
    </div>
  </div>
  
  <div class="back">
    <div class="pad">
      <h1>Yup, still awesome.</h1>
      <p>Flipped!</p>
    </div>
  </div>
  
</section>

<section class="flipper">
  
  <div class="front">
    <div class="pad">
      <h1>I am awesome!</h1>
      <p>Lets flip around...</p>
    </div>
  </div>
  
  <div class="back">
    <div class="pad">
      <h1>Yup, still awesome.</h1>
      <p>Flipped!</p>
    </div>
  </div>
  
</section>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
$('.flipper').hover(
function () {
  $(this).addClass('flip');
},
function () {
  $(this).removeClass('flip');
});
    </script>
</body>
</html>

22. gsap flip cards

Made by dinos. Invisible flip cards that only appear when you hover your mouse. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
html, body {
    background: #141416;
    margin: 0;
    padding: 0;
}
*, 
*::after, 
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.demoWrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.stage {
    position: relative;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.card {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 250px;
    margin: 0 15px;
    white-space: nowrap;
}

.card.active {
    z-index: 10;
}

.card .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 400px;
    height: 100%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    -moz-transform: translateY(-50%) translateX(-50%);
    -ms-transform: translateY(-50%) translateX(-50%);
    -o-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    overflow: hidden;
    cursor: pointer;
}

.card .inner .content {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.card .inner .content  h1 {
    position: absolute;
    left: 0;
    top: 50%;
    display: block;
    width: 100%;
    height: auto;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 1.6em;
    text-shadow: 0 0 10px rgba(0,0,0,0.6);
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}

.stage .card:nth-child(1) .inner {
   
    background: hsl( 80, 100%, 50%);
}
.stage .card:nth-child(2) .inner {
    background: hsl( 40, 100%, 50%);
}

.stage .card:nth-child(3) .inner {
    background: hsl( 0, 100%, 50%);
}

.stage .card:nth-child(4) .inner {
    background: hsl( 160, 100%, 50%);
}

.stage .card:nth-child(5) .inner {
    background: hsl( 120, 100%, 50%);
}

.stage .card:nth-child(6) .inner {
    background: hsl( 200, 100%, 50%);
}

.stage .card:nth-child(7) .inner {
    background: hsl( 280, 100%, 50%);
}

.stage .card:nth-child(8) .inner {
    background: hsl( 240, 100%, 50%);
}
.stage .card:nth-child(9) .inner {
    background: hsl( 320, 100%, 50%);
}
</style>
</head>

<body translate="no" >
  <html >
<head>
  <meta charset="UTF-8">
  <title>GSAP 3D Cards</title>
</head>

<body>
<div class="demoWrapper">
    <div class="stage">
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=1061)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=1057)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=1055)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=1053)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=1041)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=1019)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=990)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
        <div class="card">
            <div class="inner">
                <div class="content" style="background-image: url(https://unsplash.it/400/250?image=962)">
                    <h1>Dark waters</h1>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
      <script id="rendered-js" >
jQuery(document).ready(function ($) {

  var stage = $('.stage');
  card = $(".card"),
  inner = card.find('.inner'),
  rotation = 90;


  function setCards() {
    TweenLite.set(stage, {
      perspective: 1000,
      transformStyle: "preserve-3d" });

    TweenMax.set(inner, {
      x: "-100%",
      autoAlpha: 0,
      rotationY: rotation,
      transformOrigin: "50% 50%" });
    intro();
  }
  setCards();


  function intro() {
    TweenMax.staggerTo(inner, 0.6, {
      x: '-50%',
      autoAlpha: 1,
      ease: Power2.easeOut },
    -0.1);
    tilt();
    flip();
  }

  // mouse move (tilt effect)
  function tilt() {
    $(document).mousemove(function (event) {
      var xPos = event.clientX / $(window).width() - 0.5;
      TweenLite.to(stage, 1, { rotationY: 20 * xPos, ease: Power4.easeOut });
    });
  }


  function flip() {

    card.each(function (index, element) {
      var inner = $(this).find('.inner'),
      content = inner.find('.content'),
      innerWidth = inner.width(),
      flipTl = new TimelineMax({ paused: true }).
      to($(this), 0.4, { width: innerWidth, ease: Power2.easeOut }).
      to(inner, 0.4, { rotationY: 0, ease: Power2.easeOut }, 0).
      to(content, 0.3, { autoAlpha: 1, ease: Power2.easeOut });

      element.animation = flipTl;

    });


    card.on('mouseover', function (event) {
      event.preventDefault();
      if ($(".active")[0]) {
        $(".active")[0].animation.reverse();
        TweenLite.set($(".active")[0], { className: "-=active" });
      }
      this.animation.play();
      TweenMax.set(this, { className: "+=active" });
    });

    card.on('mouseout', function (event) {

      this.animation.reverse();
    });

  }

}); // jQuery
    </script>
</body>
</html>

23. Simple Flip Cards

Made by Steph. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
@import url(https://fonts.googleapis.com/css?family=Raleway:300);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300);
body {
  background: #fafaf5;
  margin: 0;
  padding: 0;
  font-family: "Roboto Slab", sans-serif;
  height: 100%;
  color: #333;
  line-height: 1em;
}

.current {
  max-width: 540px;
  margin: 20px auto 50px;
  padding: 30px;
  line-height: 1.5em;
  border: 1px solid #f4f4f4;
  background: #fff;
  color: #333;
  border-radius: 6px;
  box-shadow: 0 2rem 5rem -3rem rgba(49, 47, 54, 0.5);
}

h2 {
  font: 3em Montserrat, sans-serif;
  margin: 30px 0 10px 0;
  text-align: center;
  text-transform: uppercase;
}

a, a:visited {
  color: #04768a;
  text-decoration: none;
}

h3 {
  font: 1.2em Raleway, sans-serif;
  line-height: 1em;
  padding: 5px;
}

h4 {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8em;
  padding: 10px 0px;
  /*border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(255,255,255,.15);*/
  background: rgba(0, 0, 0, 0.15);
}

.flexbox {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 600px;
  margin: 0px auto;
}

.card-container {
  perspective: 900px;
  -webkit-perspective: 900;
  -moz-perspective: 900;
  -o-perspective: 900;
  margin: 25px;
}

.card {
  position: relative;
  width: 210px;
  height: 260px;
  padding: 20px;
  transition: all 0.6s ease;
  transform-style: preserve-3d;
  -webkit-transition: all 0.6s ease;
  -webkit-transform-style: preserve-3d;
  -moz-transition: all 0.6s ease;
  -moz-transform-style: preserve-3d;
  -o-transition: all 0.6s ease;
  -o-transform-style: preserve-3d;
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 280px;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 2rem 3rem -1rem rgba(49, 47, 54, 0.4);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}

.front {
  font-size: 18px;
  text-align: center;
  display: inline-block;
  color: #fff;
  background: #514e5c;
}

.back {
  display: flex;
  width: 200px;
  height: 230px;
  padding: 25px;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  background: #333;
  line-height: 1.6em;
}

.card-container:hover .card {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}

.back {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}
</style>
</head>

<body translate="no" >
  <div class="current"> I am currently accepting freelance work in the NYC metro area. Please get in touch if you would like to schedule a project!</div>

<h2>History</h2>

<div class="flexbox" ontouchstart="this.classList.toggle('hover');">
<div class="card-container">
  <div class="card">
    <div class="front">
      <img src="https://static1.squarespace.com/static/56f31db12b8dde0dbfa5da19/t/570aba00b09f959184e2a394/1460320768686/icon-fl.png/" style="padding:20px 0 0 0;">
      
      <h3>Freelance</h3>
      
      <h4>
        <span class="fa fa-calendar-o" style="font-size:18px; margin-right:10px"></span>
        March 2010–Present<br>
        <span class="fa fa-map-marker" style="font-size:18px; margin-right:10px"></span>NJ, NYC,  remote</h4>
    </div>
    <div class="back">
      <p>I create inspired and engaging design solutions for my clients. I can be found collaborating on projects like branding and product design, UX/UI for web, and marketing collateral.</div>
  </div>
</div> 
  
<!-- WORDS AND PICTURES -->
  <div class="card-container">
  <div class="card">
    <div class="front">
      <img src="https://static1.squarespace.com/static/56f31db12b8dde0dbfa5da19/t/570aba05b09f959184e2a3ac/1460320773878/icon-wp.png" style="padding:20px 0 0 0;">
      <h3>Words & Pictures</h3>
      
      
      <h4>
        <span class="fa fa-calendar-o" style="font-size:18px; margin-right:10px"></span>
        Jan 2015–March 2016<br>
        <span class="fa fa-map-marker" style="font-size:18px; margin-right:10px"></span>Park Ridge, NJ</h4>
    </div>
    <div class="back">
        <p>I worked on a wide variety of digital and print projects at W&P for clients including Sony and BMW. <br>
    </div>
  </div>
</div>

 <!-- MERCEDES -->
  <div class="card-container">
  <div class="card">
    <div class="front">
<img src="https://static1.squarespace.com/static/56f31db12b8dde0dbfa5da19/t/570abc974d088e29f6f73aef/1460321431269/icon-mb.png" style="padding:20px 0 0 0;">
      
      <h3>Mercedes-Benz</h3>

      <h4>
        <span class="fa fa-calendar-o" style="font-size:18px; margin-right:10px"></span>
        March 2013–Jan 2015<br>
        <span class="fa fa-map-marker" style="font-size:18px; margin-right:10px"></span>Montvale, NJ</h4>    </div>
    <div class="back">
      <p>I was a part of the highly collaborative  Digital Interactive team creating <br>e-learning material for their employee training programs.<br></div>
  </div>
</div>

<!-- STUDENT -->
<div class="card-container">
  <div class="card">
    <div class="front">
      <img src="https://static1.squarespace.com/static/56f31db12b8dde0dbfa5da19/t/570ac0442fe131a6e2024f1a/1460322372917/icon-st.png" style="padding:20px 0 0 0;">
      
      <h3>Student</h3>
      
      <h4>
        <span class="fa fa-calendar-o" style="font-size:18px; margin-right:10px"></span>
        Sept 2008–May 2012<br>
        <span class="fa fa-map-marker" style="font-size:18px; margin-right:10px"></span>Galloway, NJ</h4>
    </div>
    <div class="back">
      <p>My degree in Visual Communications gave me a thorough introduction to the Adobe Creative Suite. <br>My background in liberal arts is fundamental in my approach to problem solving.<br><!-- <br><a href="http://stepholson.com/student-work"><span class="fa fa-eye" style="font-size:20px;"></span> See projects</a></p>--> </div>
  </div>
</div>

</div>
<div style="width:100%; height:60px; display:inline-block;"></div>
  <script src='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'></script>
</body>
</html>