JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    
			<div id="pic">
	
			</div>
	
			<div id="play">
	
			</div>
	
			<div id="explode">
	
			</div>

		</div>

CSS

#box{ 
	\\position:fixed; 
	top:0; 
	left:0; 
	width:550px; 
	height:450px;
	background: black; 
} 

#pic{ 
	width: 128px; 
	height: 128px; 
	top:80%; 
	position: relative; 
	\\background: red;
	background-image: url('http://i.imgur.com/qrsk6O1.png');
	transition: 3s;
}

#pic.hover {

	width: 128px; 
	height: 128px; 
	top:80%; 
	position: relative; 
	\\background: red;
	background-image: url('http://i.imgur.com/qrsk6O1.png');
	transition: 5s;
	transform:translate(400px, -380px) rotate(45deg) ;

}

#play {
	width: 50px;
	height: 50px;
	background:lime;
	float: left;
	
}

#explode {
	width: 50px;
	height: 50px;
	background:red;
	float: left;
	
}

JavaScript

document.querySelector('#play').addEventListener('click', flyRocket)

function flyRocket(){
	document.querySelector('#pic').classList.add('hover')
}