<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')
});
