CSS FLIP FINE TUNING

by Dejan Munjiza

HTML

<div class="container">
  <div class="el">
    <div class="front">
      Front Side
    </div>
    <div class="back">
      Back Side
    </div>
  </div>
</div>

CSS

img {
  width: 30px;
  height: 30px;
}
.container {
  width: 200px;
  height: 200px;
}
.container:hover .el{ 
 transform: rotateY(180deg);
}
.el {
  position: relative;
  display: block;
  width: 100%;
  height: 120%;
  background: #eee;
  transition: 0.6s;
  transform-style: preserve-3d;
}
.front {
  width: 100%;
  height: 100%;
  float: left;
  background: lightgreen;
  backgace-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
	transform: rotateY(0deg);
}
.back {
  width: 100%;
  height: 100%;
  float: left;
  background: lightblue;
  backgace-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
}