3D Geometric plane animation using CSS3

Some days ago, I answered a question on Stack Overflow that asked for emulating a JavaScript Popmotion code using the GreenSock library. The original code animates a geometric plane with a tridimensional effect when it is dragged with the mouse.

Answering that question, the next code resulted, that replicates the same effect using just Vanilla JavaScript and CSS3 transformations, leaving the GreenSock library just to make the return animation of the plane to the origin point when it is released.

HTML code

<div id="container">

	<div class="box"></div>

</div>

CSS code

html {
	height: 100%;
}

body {
	background: #232b2b;
	margin: 0;
	padding: 0;
	height: 100%;
}

#container {
	height: 100%;
	perspective: 700;
	perspective-origin: 50% 50%;
	position: relative;
	transform-style: preserve-3d;
	width: 100%;
}

.box {
	background: #E87A24;
	border-radius: 4px;
	height: 150px;
	left: 50%;
	margin-left: -75px;
	margin-top: -75px;
	position: absolute;
	cursor: pointer;
	top: 50%;
	will-change: transform;
	width: 150px;
}

JavaScript code

//---Variables
var doc    = document;

doc.addEventListener("DOMContentLoaded", function () {

	var box    = doc.querySelector(".box"),
	    startX = 0,
	    startY = 0,
	    posX   = 0,
	    posY   = 0,
	    speedX = 0,
	    speedY = 0,
	    obj    = {x: 0, y: 0, speedX: 0, speedY: 0};

	//---Main Events
	box.addEventListener("mousedown", startMove);
	box.addEventListener("touchstart", startMove);
	doc.addEventListener("mouseup", stopMove);
	box.addEventListener("touchend", stopMove);

	//---Start the movement
	function startMove (evt) {

		var touch = evt.touches || evt.targetTouches;

		startX = (touch) ? touch[0].pageX : evt.pageX;
		startY = (touch) ? touch[0].pageY : evt.pageY;

		//---Add the mouse move events
		doc.addEventListener("mousemove", updatePosition);
		box.addEventListener("touchmove", updatePosition);

	}

	//---Update variables
	function updatePosition (evt) {
	  
		var touch = evt.touches || evt.targetTouches;
		var pageX = (touch) ? touch[0].pageX : evt.pageX;
		var pageY = (touch) ? touch[0].pageY : evt.pageY;

		speedX = (pageX - posX) * 5;
		speedY = (pageY - posY) * 5;

		if (speedX < -45) { speedX = -45 }
		if (speedX > 45) { speedX = 45 }
		if (speedY < -45) { speedY = -45 }
		if (speedY > 45) { speedY = 45 }

		posX = pageX;
		posY = pageY;

		obj.x += (posX - startX - obj.x) * .15;
		obj.y += (posY - startY - obj.y) * .15;
		obj.speedX += (speedX - obj.speedX) * .15;
		obj.speedY += (speedY - obj.speedY) * .15; 

		updateTransform();

	}

	//---Stop movement, returns the box to its place
	function stopMove () {

		TweenLite.to(obj, 0.75, {
			ease: Elastic.easeOut.config(1, 0.3),
			x: 0,
			y: 0,
			speedX: 0,
			speedY: 0,
			onUpdate: updateTransform
		});

		doc.removeEventListener("mousemove", updatePosition);

	}

	//---Update the box transformations
	function updateTransform () {

		var transformStr = "translate(" + obj.x + "px, " + obj.y + "px) rotateX(" + (-obj.speedY) + "deg) rotateY(" + obj.speedX + "deg)";

		box.style.transform = box.style.oTransform = box.style.MozTransform = box.style.WebkitTransform = transformStr;

	}

});

Result (drag quickly the plane)

Download the example files of the 3D Geometric plane animation using CSS3.

(1 votes, average: 5.00 Out Of 5)

3D Geometric plane animation using CSS3https://xprimiendo.com/en/3d-geometric-plane-animation-using-css3/3D,animation,css3,javascript,transformations,trigonometry