Spin Elements in 3d with GreenSock
GreenSock supports all of the CSS3 3d properties, so you can freely rotate around X, Y, and Z axises with rotationX, rotationY, and rotationZ. Once that's set up, you can tweak the perspective of the element with transformPerspective.
Instructor: [00:00] To tween an element in 3D space, we'll use tweenMax to tween the box for one second, and we'll change the rotationY property. We'll have it add 180° each time we click. I'll click, and it'll spin 180° around the y-axis.
[00:22] The y-axis is up and down. The x-axis would be left and right, so it spins over the left and right axis, and then the z-axis would be a normal rotation like a clock. The z-axis goes from front to back. I'll put this back at rotationY.
[00:41] Then you could also change the perspective of these changes. If I say tweenMax set box, and I'll set the transform perspective to something like 200. Now, when I click on it, the perspective changes. You can see the corners come out a little bit more to add that perspective.
[01:03] You can really exaggerate this by bringing this number down. If I click again, we'll see that really change the perspective or make it much by subtle by upping the number, where you still see the perspective just a tiny, tiny bit there.