Animated 3D Transforms

Add cool 3D effects to your 2D games

On browsers that support animated CSS transitions (most desktop browsers do, some mobile browsers are catching up), you can set 3D layer transforms to happen over a period of time. In the snippet below, whenever the user clicks we calculate a random rotation on X and Y, and apply it over a period of 2 seconds.
App = function() { // load a scene from a JSON file this.init = function() { wade.loadScene('/snippets/samples/testscene.json', true); }; // rotate one of the layers on mouse down this.onMouseDown = function() { // pick a random rotation on X and Y var rotX = Math.floor(Math.random() * 45); var rotY = Math.floor(Math.random() * 45); var transform = 'rotateX(' + rotX + 'deg) rotateY(' + rotY + 'deg)'; // rotate over 2 seconds wade.setLayer3DTransform(10, transform, '', 2); }; };
Your code was executed successfully!