Card Flip

<style>
* {
  box-sizing: border-box;
}
 
.card {
  position: relative;
  margin: 40px;
  perspective: 600px;
  width: 200px;
  height: 200px;
  background: #FFF;
  cursor: pointer;
  z-index: 1;
}
 
.card.flipped {
  z-index: 2;
}
 
.card .front {
  position: absolute;
  border: 1px solid black;
  height: 200px;
  width: 200px;
  transform: rotateY(0deg);
  transition: transform 400ms ease-in-out,
    visibility 200ms step-end;
  transform-style: preserve-3d;
}
.card .back {
  position: absolute;
  border: 1px solid black;
  height: 200px;
  width: 200px;
  visibility: hidden;
  transform: rotateY(180deg);
  transition: transform 400ms ease-in-out,
    visibility 200ms step-end;
  transform-style: preserve-3d;
 
  color: white;
  background: black;
}
 
.card.flipped .back {
  visibility: visible;
  transform: rotateY(360deg);
}
.card.flipped .front {
  visibility: hidden;
  transform: rotateY(180deg);
}
 
.card .extension {
  border: 1px solid black;
  position: absolute;
  top: 198px;
  left: 0; right: 0;
  overflow: hidden;
  background: #FFF;
 
  visibility: hidden;
  max-height: 0px;
  transition: max-height 400ms ease-out;
}
 
.card .extension.extended {
  visibility: visible;
}
</style>
 
<script>
function flip(card) {
  card.classList.toggle('flipped');
  var extension = card.getElementsByClassName('extension')[0];
  if(extension.classList.contains('extended')) {
    extension.classList.remove('extended');
    extension.style.maxHeight = '0px';
  } else {
    setTimeout(function() {
      extension.classList.add('extended');
      extension.style.maxHeight = extension.scrollHeight + "px";
    }, 400);
  }
}
</script>
 
<main style="height: 1000px;">
 
<div class="card" onClick="flip(this)">
<div class="front">
  <p>I am Card.  Click me.</p>
</div>
 
<div class="back">
  <p>Welcome to the Other Side of the Universe.</p>
</div>
 
<div class="extension">
  <p>Yep there's more!</p>
  <p>Content is awesome.</p>
  <p>Yep there's more!</p>
  <p>Content is awesome.</p>
  <p>Yep there's more!</p>
  <p>Content is awesome.</p>
</div>
</div>
 
<div class="card" onClick="flip(this)">
<div class="front">
  <p>I am Card.  Click me.</p>
</div>
 
<div class="back">
  <p>Welcome to the Other Side of the Universe.</p>
</div>
 
<div class="extension">
  <p>Yep there's more!</p>
  <p>Content is awesome.</p>
  <p>Yep there's more!</p>
  <p>Content is awesome.</p>
  <p>Yep there's more!</p>
  <p>Content is awesome.</p>
</div>
</div>
 
</main>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License