JSFiddle - React, Tailwind, and code Playground

HTML

<div id="space">
		<div id="kub">
			<div class="side front">front</div>
			<div class="side back">back</div>
			<div class="side left">left</div>
			<div class="side rigth">rigth</div>
			<div class="side top">top</div>
			<div class="side bottom">bottom</div>
		</div>
	</div>
	<script>
		const kub = document.getElementById('kub');
		kub.addEventListener('mousemove', anim);
		function anim(event){
			const halfHeight = this.offsetHeight / 2;
			this.style.transform = 'rotateX(' + -(event.offsetY - halfHeight)/100 + 'deg) rotateY(' + (event.offsetX - halfHeight)/100 + 'deg)';
			console.log('Yes');
		}

	</script>

CSS

body{
	background:  black;
}
#space{
	width: 600px;
	height: 600px;
	background: black;
	margin: 100px auto;
	position: relative;
	perspective: 800px;
}

#kub{
	width: 600px;
	height: 600px;
	margin: 50px auto; 
	position: absolute;
	transform-style: preserve-3d
}

.side{
	width: inherit;
	height: inherit;
	border: 1px solid white;
	position: absolute;
	color: yellow;
	font-size: 40px; 
  outline: 1px solid transparent; /* Вот это */
}
.front{
	transform: translateZ(300px);
}
.back{
	transform: rotateY(180deg) translateZ(300px);
}
.left{
	transform: rotateY(-90deg) translateZ(300px);
}
.rigth{
	transform: rotateY(90deg) translateZ(300px);
}
.top{
	transform: rotateX(90deg) translateZ(300px);
}
.bottom{
	transform: rotateX(-90deg) translateZ(300px);
}