css test

by zachpainter77

HTML

<div class="flip3D">
  <div class="back">
  Box 1 - Back
  </div>
   <div class="front">
  Box 1 - Front
  </div>
</div>
<div class="flip3D">
  <div class="back">
  Box 2 - Back
  </div>
   <div class="front">
  Box 2 - Front
  </div>
</div>

CSS

.flip3D{ 
  width: 240px;
  height:200px;
  margin:10px;
  float:left;
}

.filp3D > .front {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(0deg);
  background: #FC0; 
  width:240px;
  height:200px;
  border-radius: 7px;
  backface-visibility: hidden;
  -webkit-transition: transform .5s linear 0s;
}

.filp3D > .back {
  position: absolute;
  -webkit-transform: perspective(600px) rotateY(180deg);
  background: #80BFFF; 
  width:240px;
  height:200px;
  border-radius: 7px;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform .5s linear 0s;
}

.filp3D:hover > .front{
  transform:perspective(600px) rotateY(-180deg);  
}

.filp3D:hover > .back{
  -webkit-transform:perspective(600px) rotateY(0deg);  
}