JSFiddle - React, Tailwind, and code Playground

by Thornton_Fernbacher

HTML

<div id="move">
<a class="text" id="one">
Hello
</a>
</div>

CSS

.text {
	font-size:100px;
	position:absolute;
	transition:.5s;
}
#one {
	transform:attr(data-transform);
	color:grey;
	z-index:-1;
}
.text::after {
	top:0;
	left:0;
	content:"Hello";
	position:absolute;
	display:block;
	z-index:0;
	color:black;
}
.text::before {
	transform:attr(data-beforePos);
	display:block;
	content:"Hello";
	position:absolute;
	color:grey;
	z-index:-1;
}

#move {
	width:100%;
	height:200px;
}
#move:hover .text {
	transition:0s;
}
*/

JavaScript

$( document ).ready(function() {
var one = document.getElementById("one");
$("#move").mouseleave(function() {
	//document.getElementById("one").style.transform = "";
	//document.getElementById("two").style.transform = "";
	console.log("hi");
});

var max = 20;
$("#move").mousemove(function( event ) {
	 var y = event.pageY - ($("#one").offset().top) - one.offsetHeight/2;
  var x = event.pageX - ($("#one").offset().left) - one.offsetWidth/2;
  
	var mag = Math.sqrt(2* (x*x + y*y));
	
	if(y > max || -y > max || x > max || -x > max) {
		y = 2*(y / mag) * (max);
		x = 2*(x /mag) * (max);
	}
	var xr = Math.clamp(((event.pageX - $("#one").offset().left) - one.offsetWidth/2) / this.offsetWidth * 100,-30,40 );
  
  var yr = Math.clamp(((event.pageY - $("#one").offset().top) - one.offsetHeight/2) / this.offsetHeight * 100,-30,30);
	
  $("#one").attr("data-transform","translate(" + x + "px," + y + "px)rotateX(" + -yr + "deg)rotateY(" + xr + "deg)");
	//document.getElementById("two").style.transform = "translate(" + x/2 + "px," + y/2 + "px)rotateX(" + -yr/2 + "deg)rotateY(" + xr/2 + "deg)");
  
  console.log($("#one::after").css("tramsform"));
  
});
});

(function(){Math.clamp=function(a,b,c){return Math.max(b,Math.min(c,a));}})();