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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!