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.
It is possible to insert code fragments between <pre></pre> tags and HTML or XML code between <xmp></xmp> tags.