JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="toggle">Toggle</a>
<div class="grid">
    
	<div class="tile posone">
    	<div class="front"><img src="http://placehold.it/250x175/00baff/ffffff" height="175" height="250" /></div>
        <div class="back"><img src="http://placehold.it/250x175/ffa800/ffffff" height="175" height="250" /></div>
    </div>

    <div class="tile posone">
    	<div class="front"><img src="http://placehold.it/250x175/00baff/ffffff" height="175" height="250" /></div>
        <div class="back"><img src="http://placehold.it/250x175/ffa800/ffffff" height="175" height="250" /></div>
    </div>

   	<div class="tile posone">
    	<div class="front"><img src="http://placehold.it/250x175/00baff/ffffff" height="175" height="250" /></div>
        <div class="back"><img src="http://placehold.it/250x175/ffa800/ffffff" height="175" height="250" /></div>
    </div>
    
   	<div class="tile posone">
    	<div class="front"><img src="http://placehold.it/250x175/00baff/ffffff" height="175" height="250" /></div>
        <div class="back"><img src="http://placehold.it/250x175/ffa800/ffffff" height="175" height="250" /></div>
    </div>
    
</div>

CSS

* { font-family:Arial, Helvetica, sans-serif; }
.toggle { display:inline-block; padding:20px; background:#666; margin:0 0 10px 0; color:#fff; font-size:15px; text-decoration:none; }
.grid { overflow:hidden; }
.tile { width:250px; height:175px; position:relative; float:left; margin:0 1px 1px 0; cursor:pointer; -webkit-perspective:600px; }
.tile > div { position:absolute; top:0; left:0; right:0; bottom:0; -webkit-backface-visibility:hidden; -webkit-transition:-webkit-transform 0.2s ease-in-out; }

.tile .front { -webkit-transform:rotateX(0deg); }
.tile .back { -webkit-transform:rotateX(-180deg); }

.tile.postwo .front { -webkit-transform:rotateX(180deg); }
.tile.postwo .back { -webkit-transform:rotateX(0deg); }

JavaScript

flip = { 
		init: function(){
			$('.toggle').on('click', flip.toggle);
			$('.tile').on('hover', flip.hover);
		},
		
		toggle: function(e){
			e.preventDefault();
			$('.tile').each(function(i, elm) {
					setTimeout(function(){
				flip.autoFlip($(elm));
			}, i*40);
			});
		},
		
		hover: function(e){
			if (e.type === 'mouseenter'){
				var dir = flip.getDir($(this), { x:e.pageX, y:e.pageY });
			}
			flip.flipOver($(this), e.type, dir);
		},
		
		flipOver: function($elm, type, dir){
				
				switch (dir) {
					case 0 :
						$elm.addClass('top');	
					break;
					case 1 :
						$elm.addClass('right');	
					break;
					case 2 :
						$elm.addClass('bottom');	
					break;
					case 3 :
						$elm.addClass('left');	
					break;
					default :
						$elm.removeClass('top right bottom left');
				}
				
				$elm.toggleClass('posone postwo');
			
		},
		
		autoFlip: function($elm){
			$elm.toggleClass('posone postwo');
		},
		
		getDir: function($elm, coord){
			var w = $elm.width(),
				h = $elm.height(),
				x = ( coord.x - $elm.offset().left - ( w/2 )) * ( w > h ? ( h/w ) : 1 ),
				y = ( coord.y - $elm.offset().top  - ( h/2 )) * ( h > w ? ( w/h ) : 1 ),
				direction = Math.round( ( ( ( Math.atan2(y, x) * (180 / Math.PI) ) + 180 ) / 90 ) + 3 )  % 4;
			return direction;
		}
		
	}
	
	$(document).ready(function() {
		flip.init();
	});