JSFiddle - React, Tailwind, and code Playground

by abdallha dagga

HTML

<div id="table">
		<h2>خدمة مميزة على خمسات لحماية قالبك من السرقة</h2>
     <h3>MOVE MOUSE</h3>
		<div id="inner-top-wall"></div>
		<div id="inner-left-wall"></div>
		<div id="inner-bottom-wall"></div>
		<div id="inner-right-wall"></div>
		<div id="outer-top-wall"></div>
		<div id="outer-left-wall"></div>
		<div id="outer-bottom-wall"></div>
		<div id="outer-right-wall"></div>
		<div id="top-top-wall"></div>
		<div id="top-left-wall"></div>
		<div id="top-bottom-wall"></div>
		<div id="top-right-wall"></div>
		<div id="box">
			<div class="front"></div>
		    <div class="back"></div>
		    <div class="right"></div>
		    <div class="left"></div>
		    <div class="top"></div>
		</div>
	</div>

CSS

body{
	background-color: #47c9af;
	overflow: hidden;
	padding: 0;
	margin: 0;
	font-family: 'Alfa Slab One', arial;
	-webkit-perspective: 1400px;
	-moz-perspective: 1400px;
	-ms-perspective: 1400px;
	perspective: 1400px;
}

#table{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 800px;
	height: 600px;
	background-color: #eb974e;
	margin: 10px 0 0 -400px;
	
	-webkit-transform-style: preserve-3d;
	-webkit-transition: all 300ms;

	-moz-transform-style: preserve-3d;
	-moz-transition: all 300ms;

	-ms-transform-style: preserve-3d;
	-ms-transition: all 300ms;

	transform-style: preserve-3d;
	transition: all 300ms;
}
#table h2{
  line-height: 300px;
  color: #fff;
  font-size: 80px;
  text-align: center;
  margin: 0;
  padding: 0;
}
#table h3{
  line-height: 100px;
  color: #fff;
  font-size: 50px;
  text-align: center;
  margin: 0;
  padding: 0;
}
#table.up{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateX(10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateX(10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateX(10deg);

	transform-origin: bottom right;
	transform: rotateX(10deg);
}
#table.down{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateX(-10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateX(-10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateX(-10deg);

	transform-origin: bottom right;
	transform: rotateX(-10deg);
}
#table.left{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(-10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(-10deg);

	-ms-transform-origin: bottom right;
	-ms-transform: rotateY(-10deg);

	transform-origin: bottom right;
	transform: rotateY(-10deg);
}
#table.right{
	-webkit-transform-origin: bottom right;
	-webkit-transform: rotateY(10deg);

	-moz-transform-origin: bottom right;
	-moz-transform: rotateY(10deg);

	-ms-transform-origin: bottom right;
	-ms-transform:...

JavaScript

var $box = document.getElementById('box');
var $table = document.getElementById('table');

var speed = 1;
var direction = 190;
var move = true;

var left = {x: 0, y: 0, width: 80, height: 600}
var right = {x: 720, y: 0, width: 80, height: 600}
var up = {x: 0, y: 0, width: 640, height: 80}
var bottom = {x: 6, y: 520, width: 640, height: 80}
var box = {x: 100, y: 100, width: 100, height: 100}

function collision(){
	if (box.x < left.x + left.width &&
	   box.x + box.width > left.x &&
	   box.y < left.y + left.height &&
	   box.height + box.y > left.y) {
		speed = 0;
		box.x += 1;
	    $box.style.left = box.x;
	}
	else if (box.x < right.x + right.width &&
	   box.x + box.width > right.x &&
	   box.y < right.y + right.height &&
	   box.height + box.y > right.y) {
		speed = 0;
		box.x -= 1;
	    $box.style.left = box.x;
	}
	else if (box.x < up.x + up.width &&
	   box.x + box.width > up.x &&
	   box.y < up.y + up.height &&
	   box.height + box.y > up.y) {
		speed = 0;
		box.y += 1;
	    $box.style.top = box.y;
	}
	else if (box.x < bottom.x + bottom.width &&
	   box.x + box.width > bottom.x &&
	   box.y < bottom.y + bottom.height &&
	   box.height + box.y > bottom.y) {
		speed = 0;
		box.y -= 1;
	    $box.style.top = box.y;
	}	
}

function moveBox() {
	setTimeout(function () {   

		if(direction > 0 && direction < 90){
			$table.setAttribute("class", "up-left");
		}
		if(direction > 90 && direction < 180){
			$table.setAttribute("class", "up-right");
		}
		if(direction > 180 && direction < 270){
			$table.setAttribute("class", "down-right");
		}
		if(direction > 270 && direction < 360){
			$table.setAttribute("class", "down-left");
		}

		box.y -= speed * Math.sin(direction * (Math.PI/180));
		box.x -= speed * Math.cos(direction * (Math.PI/180));
     console.log(box.x);

	    $box.style.top = Math.round(box.y) + "px";
	    $box.style.left = Math.round(box.x) + "px";

	    speed += 0.3;

	    collision();
	    if (move) {          
	    	moveBox();            
	   ...