JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.8.3/TweenMax.min.js"></script>
<div id="container">
			<div id="img1" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>
			<div id="img2" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>	
			<div id="img3" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>	
			<div id="img4" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>	
			<div id="img5" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>	
			<div id="img6" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>	
			<div id="img7" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>	
			<div id="img8" class="img_thumb">
				<img src="http://placehold.it/400x300">
			</div>	
		</div>

CSS

body {
	margin: 0;
/*	overflow: hidden;*/
	background-color:#ededed;
	width: 100vw;
	height:100vh;
	-moz-transform: perspective(1000000px);
	-moz-transform-style: preserve-3d;
	-webkit-perspective: 1000000px;
	position: absolute;
	
}

#container {
	left:50%;
	top:50%;
	margin-left: -50vw;
	margin-top: -50vh;
	width: 100vw;
	height: 100vh;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
	transform: translateZ(0px);
	-moz-transform: translateZ(0px);
	-webkit-transform: translateZ(0px);
	position: absolute;

}

#img_thumb {
  background:grey;
}

#img1 {
	top: 50px;
	left: 20%;
	transform: translateZ(0px);
	position: absolute;
}
#img1 img {
	width: 300px;
}
#img2 {
	top: 300px;
	left: 44%;
	transform: translateZ(120px);
	position: absolute;
}
#img2 img {
	width: 400px;
}
#img3 {
	top: 700px;
	left: 24%;
	transform: translateZ(60px);
	position: absolute;
}
#img3 img {
	width: 300px;
}
#img4 {
	top: 1000px;
	left: 55%;
	transform: translateZ(0px);
	position: absolute;
}
#img4 img {
	width: 400px;
}
#img5 {
	top: 1300px;
	left: 5%;
	transform: translateZ(60px);
	position: absolute;
}
#img5 img {
	width: 400px;
}
#img6 {
	top: 1550px;
	left: 30%;
	transform: translateZ(120px);
	position: absolute;
}
#img6 img {
	width: 400px;
}
#img7 {
	top: 1650px;
	left: 70%;
	transform: translateZ(0px);
	position: absolute;
}
#img7 img {
	width: 300px;
}
#img8 {
	top: 1800px;
	left: 20%;
	transform: translateZ(60px);
	position: absolute;
}
#img8 img {
	width: 400px;
}

JavaScript

var request = null;
	var mouse = { x: 0, y: 0 };
	var cx = window.innerWidth / 2;
	var cy = window.innerHeight / 2;

	$('html').mousemove(function(event) {

		mouse.x = event.pageX;
		mouse.y = event.pageY;

		cancelAnimationFrame(request);
		request = requestAnimationFrame(update);	
	});

	function update() {

		dx = mouse.x - cx;
		dy = mouse.y - cy;

		tiltx = (dy / cy);
		tilty = - (dx / cx);
		radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
		degree = (radius * 15);
		TweenLite.to("#container", 2, {transform:'rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)', ease:Power2.easeOut});
	}

	$(window).resize(function() {
		cx = window.innerWidth / 2;
		cy = window.innerHeight / 2;
	});