flip cards

by Jordan Dayton

HTML

<div class="main-wrapper">

<div class="sub-wrapper">
<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img1"></div>
      <div class="info">
        <h2>Free CPE Courses</h2>
        <p>Who likes paying for CPE credits? Why not enjoy our free CPE courses taught by industry experts?</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>What's the catch?</h2>
        <div class="reviews">
          <p>23 Reviews</p>
        </div>
        <ul>
          <li>No catch! Just high quality CPE webinars or self-study courses.</li>
          <li>Enroll in all of our courses, worth up to 50 CPE credits</li>
          <li>Ask questions and learn from other practitioners, while learning</li>
          <li>View our entire course library...</li>
        </ul>
        <a href="http://opencourse.canopytax.com">
        <div class="btn">
          <h4>Learn More</h4>
          <svg fill="#fff" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"/><path d="M0-.25h24v24H0z" fill="none"/></svg>
          </div></a>
      </div>
    </div>
  </div>
</div>
</div>  
  
<div class="sub-wrapper">
<div class="cardContainer inactive">
  <div class="card">
    <div class="side front">
      <div class="img img2"></div>
      <div class="info">
        <h2>War Stories</h2>
        <p>We've all had some crazy tax & accounging experiences. You think yours is worse than mine? Prove it!</p>
      </div>
    </div>
    <div class="side back">
      <div class="info">
        <h2>What's the catch?</h2>
        <div class="reviews">
          <p>23 Reviews</p>
        </div>
        <ul>
          <li>No catch! Just high quality CPE webinars or self-study courses.</li>
          <li>Enroll in all of our courses, worth up to 50 CPE credits</li>
          <li>Ask questions and learn from other practitioners, while...

CSS

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

h2, h4, p, ul, li {
  margin: 0;
  padding: 0;
}

h2, h4 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  color: #fff;
}

h2 {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  color: #333333;
  font-size: 27px;
  font-weight: 500;
  letter-spacing: -0.2px;
  margin-bottom: 10px;
}

p, li {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  color: #555;
  line-height: 22px;
}

ul, li {
  text-decoration: none;
  list-style: disc outside;
}

ul {
  padding-left: 20px;
}

svg {
  margin: 0px;
  min-width: 24px;
  min-height: 24px;
}

body {
  background-color: #dadce2;
  background-image: linear-gradient(140deg, white, #dadce2);
  margin: 0;
  width: 100vw;
  min-height: 450px;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-wrapper {
  margin-top: 0;
}

.sub-wrapper {
  display: inline-block;
  padding: 5px;
  vertical-align: top;
}

.cardContainer {
  position: relative;
  width: 300px;
  height: 400px;
  min-width: 300px;
  min-height: 400px;
  margin: 4px;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}

.active {
  -webkit-transform: translateZ(0px) rotateY(180deg) !important;
          transform: translateZ(0px) rotateY(180deg) !important;
}
.active:after {
  display: none;
}

.card {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
  -moz-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: translateZ(-100px);
          transform: translateZ(-100px);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  box-shadow: 0 14px 50px -4px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1.4);
}
.card:hover {
  -webkit-transform:...

JavaScript

const cards = document.querySelectorAll('.card');

function transition() {
  if (this.classList.contains('active')) {
    this.classList.remove('active')
  } else {
    this.classList.add('active');
  }
}

cards.forEach(card => card.addEventListener('click', transition));