css3 image flip onclick

HTML

<div class="cont">
    <img class="image" src="http://www.verawolf.com/themes/hammerhead/images/bracelets.jpg">
    <div class="info"> Vera Wolf Bracelets Collection - Click here to check our bracelets collection..... </div>
</div>

CSS

.info, .image{
    position:absolute;
    -webkit-transition: -webkit-transform 1s , z-index 0s 0.25s;
    
}

.info{padding:10px;
    width: 160px;
    height: 160px;
  z-index: -2;
  -webkit-transform: rotateY(360deg);   
  background-color: rgba(255,255,255,0.8);
    
}

.image{
    z-index: -1;   
    -webkit-transition: -webkit-transform 10s, z-index 0s 10s;
    -webkit-transform: rotateY(0deg);   
}

.rotator{
     
     width:160px;   
    height: 160px;
}

.rotator .info{
    -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
    z-index: -1;
    -webkit-transform: rotateY(0deg);   

}
.rotator  .image{
    -webkit-transform: rotateY(180deg);   
    -webkit-transition: -webkit-transform 1s, z-index 0s 0.25s;
    z-index: -2;
}

JavaScript

$(".cont").click(function(){
 $(this).toggleClass("rotator")  ; 
})