Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

    Spin Elements in 3d with GreenSock

    John LindquistJohn Lindquist

    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.



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson


    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.