JSFiddle - React, Tailwind, and code Playground

by karmeljuk

HTML

<section class="container">
  <div id="card">
    <figure class="front">1</figure>
    <figure class="back">2</figure>
  </div>
</section>

CSS

.container { 
  width: 200px;
  height: 260px;
  perspective: 1500px;
}

#card {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;    
 -webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
-webkit-transition: all 1000ms cubic-bezier(0.860,0.000,0.070,1.000);
-moz-transition: all 1000ms cubic-bezier(0.860,0.000,0.070,1.000);
-o-transition: all 1000ms cubic-bezier(0.860,0.000,0.070,1.000);
transition: all 1000ms cubic-bezier(0.860,0.000,0.070,1.000);
-webkit-transition-timing-function: cubic-bezier(0.860,0.000,0.070,1.000);
-moz-transition-timing-function: cubic-bezier(0.860,0.000,0.070,1.000);
-o-transition-timing-function: cubic-bezier(0.860,0.000,0.070,1.000);
transition-timing-function: cubic-bezier(0.860,0.000,0.070,1.000);
}

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

#card .front {
  background: red;
}
#card .back {
  background: blue;
  transform: rotateY( 180deg );
}

#card:hover {
  transform: rotateY( 180deg );
}