JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="fiddle">Card Flip</div>

<div class="container">
  <div id="card" class="flip">
    <div class="front"><div class="panel"><a href="#" onclick="tog(card),area(c1)">LONDON</a><p><a href="#" onclick="tog(card),area(c2)">SCOTLAND</a></div></div>
    <div class="hide" id="c1" onclick="tog(card)"><div class="panel">This is London</div></div>
    <div class="hide" id="c2" onclick="tog(card)"><div class="panel">This is Scotland</div></div>
  </div>
</div>

CSS

.fiddle {background-color:#000;color:#fff;padding:2px 6px;margin:0 0 10px 0;}

.container { 
  max-width: 300px;margin:auto;
  height: 439px;
  position: relative;
  -webkit-perspective: 800;
}
.flip {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s;
}
.flip .front, .flip .back {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
}
.front {
  background: red;
}
.back {
  background: blue;
  -webkit-transform: rotateY(180deg);
}
.flipped {
  -webkit-transform: rotateY(180deg);
}
.hide {display:none;}
.panel {padding:10px;}

JavaScript

// Card Flip



function area(el) {

var divsToHide = document.getElementsByClassName("back"); //divsToHide is an array
    for(var i = 0; i < divsToHide.length; i++){
        divsToHide[i].className = "hide";
        }// depending on what you're doing


if (el.className == "hide") {el.className = "back";}



}

function tog(el){

if(el.className == "flip")
{el.className = "flip flipped";} 
else {el.className = "flip";}}