<br />
<div class="container">
  <div class="row">
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail rotateX">
        <img data-src="holder.js/100%x180" alt="100%x180" src="http://dummyimage.com/220x180/d683d6/fff&text=rotateX">
      </a>
    </div>
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail rotateY">
        <img data-src="holder.js/100%x180" alt="100%x180" src="http://dummyimage.com/220x180/d683d6/fff&text=rotateY">
      </a>
    </div>
    <div class="col-xs-6 col-md-3">
      <a href="#" class="thumbnail rotateZ">
        <img data-src="holder.js/100%x180" alt="100%x180" src="http://dummyimage.com/220x180/d683d6/fff&text=rotateZ">
        
      </a>
    </div>
  </div>
</div>
.thumbnail {
  transition: all 1.5s ease-in-out;
}
.rotateX:hover {
  transform: rotateX(180deg);
}
.rotateY:hover {
  transform: rotateY(180deg);
}
.rotateZ:hover {
  transform: rotateZ(180deg);
}
$('.thumbnail').on('transitionend webkitTransitionEnd MSTransitionEnd', function(e) {
  if (e.originalEvent.propertyName != 'transform') return;
  
  alert('webkitTransitionEnd')
});
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js