JSFiddle - React, Tailwind, and code Playground

by nagaraj raju

HTML

<h2>2D Transform</h2>
	<span class="squre translate" onmouseover="move(this.id)" id="translate">translate</span>

CSS

@font-face {
		font-family: 'Junction';
		src: url('junction-regular.woff') format('woff');
	}
	body{
		margin:0 10%;
	}
	h2{
		font-family:'Junction';
		font-weight:lighter;
		text-align:center;
	}
	.squre{
		border:1px solid #2f2;
		display:block;
		width:40px;
		height:40px;
		background-color:#dfdfdf;
		font-size:12px;
		font-family:'Junction';
	}

JavaScript

$(document).ready(function(){       
 	$('#translate').mouseover(function(){     
     //$(this).animate({'transform':'translate(50px,0px)'},'slow');// not works
     $(this).css("transform","translate(50px,0px)");   //works fine
   });
});