3D Transforms

Rotate and translate layers in 3D space

In this snippet we simply create a text object and make it move upwards. But interestingly, we set the layer the text is on (layer 1) to be rotated on the X axis by 45 degrees, giving it a nice perspective effect. This operation is almost always performed with some hardware acceleration, so it's really fast in most cases.
App = function() { this.init = function() { // create a text object var text = "A long time ago, in a galaxy far, far away....\n\nIt is a period of civil war. Rebel\nspaceships, striking from a hidden\nbase, have won their first victory\nagainst the evil Galactic Empire.\n\nDuring the battle, rebel spies managed\nto steal secret plans to the Empire's\nultimate weapon, the Death Star, an\narmored space station with enough\npower to destroy an entire planet.\n\nPursued by the Empire's sinister agents,\nPrincess Leia races home aboard her\nstarship, custodian of the stolen plans\nthat can save her people and restore\nfreedom to the galaxy..."; var textSprite = new TextSprite(text, '24px Arial', 'blue', 'center'); var obj = new SceneObject(textSprite, 0, 0, wade.getScreenHeight() / 2); wade.addSceneObject(obj); // make it slowly move upwards obj.moveTo(0, -1000, 10); // set a 3D transform for the layer the text is on wade.setLayer3DTransform(1, 'rotateX(45deg)', 'bottom center'); }; };
Your code was executed successfully!