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

It says you need to add transition: all 1.0s linear; to the animateable content and not the container. You forgot to add the transition. Add the following CSS to achieve that:

* {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

Working Snippet

* {
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.front {
  width: 100%;
  height: 100%;
  background-color: red;
}
.front:hover {
  transform: rotateY(180deg);
}
#container {
  perspective: 1000;
  width: 200px;
  height: 200px;
}
#innercontainer {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: all 5.0s linear;
}
.back {
  width: 100%;
  height: 100%;
  background-color: blue;
}

  

    

      front
    
    

      back
    
  

Fiddle: https://jsfiddle.net/eb60k41c/