how to flip the div using css?

Question

I am trying to flip the div on hover ..I take help from this example http://css3.bradshawenterprises.com/flip/ But still I am not able to flip my div on hover ..here is my fidd

Answer 1

You could try using all the necessary pieces from the example you linked to. I updated it a bit to more closely match your example:

JSBIN

HTML:

  
  
  




  

    FRONT
  
  

    BACK
  

CSS

.container {
  position: relative;
  margin: 10px auto;
  width: 200px;
  height: 200px;
  z-index: 1;
  perspective: 1000;
}
.innercontainer {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 1.0s linear;
}
.container:hover .innercontainer {
  transform: rotateY(180deg);
  box-shadow: -5px 5px 5px #aaa;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding: 10px;
  color: white;
  text-align: center;
  background-color: #00F;
}
.face.front{
  background-color: #F00;
  color: #FFF;
  text-align: center;
  padding: 10px;
}