JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="container">
  <ul>
    <li><div>C</div></li>
    <li><div>S</div></li>
    <li><div>S</div></li>
    <li><div>3</div></li>
    <li><div>3</div></li>
    <li><div>D</div></li>
    <li><div>I</div></li>
    <li><div>S</div></li>
    <li><div>C</div></li>
    <li><div>O</div></li>
    <li><div>O</div></li>
    <li><div>L</div></li>

  </ul>
</div>
<div class="bottom">This looks better on Chrome and Safari</div>

CSS

html {
  height:100%;
  background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 960, from(#f700dd), to(#7c006f)) no-repeat #7c006f;
  background: -moz-radial-gradient(50% 50% 0deg,ellipse farthest-corner, #f700dd, #7c006f, #7c006f 170%);
	-webkit-user-select: none;
	cursor:move;
}
body {
	margin:0;
}
ul, li {
	margin:0;
	list-style:none;
	float:left;
}
ul{
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;
	}
li {
	margin: 10px 15px ;
	width:150px;
	height:90px;
	background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 50, from(rgba(0,0,0,0.2)), to(transparent)) no-repeat rgba(255,255,255,0.1);
	background: -moz-radial-gradient(50% 50% 0deg,ellipse farthest-corner,rgba(0,0,0,0.2) , transparent, transparent 100%), rgba(255,255,255,0.1);
	-webkit-user-select: none;
  border-top:1px solid rgba(255,255,255, 0.6);
  border-right:1px solid rgba(255,255,255, 0.3);
  border-bottom:1px solid rgba(255,255,255, 0.2);
  border-left:1px solid rgba(255,255,255, 0.1);
	color:#FFF;
	text-align:center;
	padding:20px 0;
	font: 70px "Arial Black", Gadget, sans-serif;

}
ul li div {
	transform:translateZ(70px);
	-ms-transform:translateZ(70px); /* IE9 */
	-moz-transform:translateZ(70px); /* Firefox */
	-webkit-transform:translateZ(70px); /* Safari and Chrome */
	-o-transform:translateZ(70px);/* Opera */

	}
.container {
	width:820px;
	margin:50px auto;
	position:relative;
}
/* Not relevant for the experiment */
.bottom {
	position:fixed;
	bottom:0;
	text-align:center;
	width:100%;
	font-family:Arial, Helvetica, sans-serif;
	background:rgba(0,0,0,0.4);
	color:#FFF !important;
	padding:5px 0;
	display:block;
}

JavaScript

var mouseX = null,
    mouseY = null,
    rotationLeftRight = null,
    rotationTopBottom = null,
    centerX = null,
    centerY = null,
    agleRotation = null;
  
	$('html').mousemove(function(e){
		
		centerX = $(this).width() / 2 ;
 		centerY = $(this).height() / 2;
		
		mouseX = (e.pageX - this.offsetLeft) - centerX;
		mouseY = (e.pageY - this.offsetTop) - centerY;
		
		rotationLeftRight =  mouseX;
		rotationTopBottom =  mouseY;
		agleRotation = (Math.abs(rotationTopBottom) + Math.abs((rotationLeftRight))) / 10;

		$('ul').css({
			transform: "rotate3d("+rotationTopBottom +", "+rotationLeftRight+", "+0+", "+agleRotation+"deg)",
			});
		})