JSFiddle - React, Tailwind, and code Playground

HTML

<div class="span4 animated" id="pitchdeck-controls">
                <div class="row" >
                    <a href="">
                        <div class="span2 tile" id = "animator">
                            <p class="tile-meta">
                            How To
                            </p>
                        </div>
                    </a>
                    <a href="">
                        <div class="span2 tile" id="tile2">
                            <p class="tile-meta">
                            2nd Slide
                            </p>
                        </div>
                    </a>
                </div>
            </div>

<div style="position:absolute;right:10px;top:20px;border:5px inset gray;background:lightgray;" id = "animator">Hover over me to do animation.</div>

CSS

/*structure*/
* { font-family: Helvetica, Arial; }

.row {
margin-left: -20px;
}

.span4 {
width: 228px;
}

[class*="span"] {
float: left;
margin-left: 20px;
}

/*targeting and animation*/

#pitchdeck-controls {  
padding:2em;
-webkit-transform: translate3d(0,0,0);
-webkit-transition-timing-function: ease-in-out;
-moz-transform: translate(0,0);
-moz-transition-timing-function: ease-in-out;
}

#tiles {
-webkit-transform: translate3d(0,0,0);
-webkit-perspective: 800px;
-moz-transform: translate(0,0);
-moz-perspective: 800px;
-webkit-transition: 300ms;
}

.leftRotate{
-webkit-transform: translate3d(0,0,0) rotateY(-90deg); 
    opacity:0;
}

.rightRotate{
 -webkit-transformation:translate3d(0,0,0) rotateY(0deg);   
    opacity:1;
}



#tile2, #tile4, #tile6, #tile8, #tile10 { margin-left: 10px; }

p.tile-meta {  
position: absolute;
left: 8px;
bottom: 5px;
margin: 0;
padding: 0;
}

.tile { 
background-color: #1ba1e1;
color:  #fff;
height: 109px;
width: 109px;
margin-bottom: 10px;
position: relative;
}

#tile1 { 
-webkit-transform-origin-x: -8px;
-webkit-transition: 300ms 0ms;
}
#tile2 {  
-webkit-transform-origin-x: -130px;
-webkit-transition: 300ms 80ms;
}
#tile3 {  
-webkit-transform-origin-x: -8px;
-webkit-transition: 300ms 160ms;
}
#tile4 {  
-webkit-transform-origin-x: -130px;
-webkit-transition: 300ms 240ms;
}
#tile5 {  
-webkit-transform-origin-x: -8px;
-webkit-transition: 300ms 320ms;
}
#tile6 {  
-webkit-transform-origin-x: -130px;
-webkit-transition: 300ms 400ms;
}
#tile7 {  
-webkit-transform-origin-x: -8px;
-webkit-transition: 300ms 480ms;
}
#tile8 {  
-webkit-transform-origin-x: -130px;
-webkit-transition: 300ms 560ms;
}
#tile9 {  
-webkit-transform-origin-x: -8px;
-webkit-transition: 300ms 640ms;
}
#tile10 {  
-webkit-transform-origin-x: -130px;
-webkit-transition: 300ms 720ms;
}

JavaScript

$('#animator').on('mouseover',function(){
   $('.tile').addClass('leftRotate').removeClass('rightRotate'); 
});
    
$('#animator').on('mouseout',function(){
   $('.tile').addClass('rightRotate').removeClass('leftRotate'); 
});