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!
