JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<article class='container'>
  <div class='frontDiv'>
    <div class='frontImg f1'>1</div>
    <div class='frontImg f2'>2</div>
  </div>
</article>

CSS

.container {
  position: relative;
  margin-top : 10px;
  width : 500px;
  height: 330px;
  -webkit-transform-style: preserve-3d; 
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d; 
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; 
 -webkit-perspective: 1500px;
  -moz-perspective: 1500px;
  perspective: 1500px; 
  box-shadow: 3px 3px 13px #AAA;
}

.frontDiv {
  padding: 20px;
  width: 500px;
  height: 330px; 
}

.frontImg {
  position: absolute;
  border:1px solid;
  height : 281px;
  width : 225px;  
  overflow: hidden;
  background-image: url('http://images6.fanpop.com/image/photos/32000000/Brave-Wallpaper-brave-32098597-1920-1181.jpg');
  transition:all 1s ease-in-out;
  -webkit-transition:all 1s ease-in-out;
   -webkit-transform-origin:0% 0%; 
}

.f1 {
  top: 20px;
  left:20px;
  background-position: 0px 0px;

    color:ghostwhite;
}


.f2 {
  top: 20px;
  left:247px;
     background:red;
    -webkit-transform : rotateY(0deg);
}

.frontDiv:hover .f2
{ 
 -webkit-transform : rotateY(-180deg);
 }