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
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Spin Elements in 3d with GreenSock

    John LindquistJohn Lindquist
    greensockGreenSock

    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.

    Code

    Code

    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
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.