Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Sahil

Anything I can do smarter in this 3D rotator?

Recommended Posts

I was trying to make a 3D rotator and it works as expected. I am using onUpdate callback to adjust z-index but I was wondering if there a smarter way to get it done?

 

Also this example only works with fixed width, I tried to make it responsive but timeline doesn't update values once it is created.

See the Pen qOqyrb by Sahil89 (@Sahil89) on CodePen

See the Pen wKorbr by Sahil89 (@Sahil89) on CodePen

Link to comment
Share on other sites

You can always scale the container on resize.

 

If you are going to do 3d using a z-index, there a several different ways to go about it. You could calculate the z value for each point on each face and then on your update callback you would sort the faces based on the their lowest z-value. That's how I did it in this demo... although SVGs don't have a z-index so I just appended the faces in that order.

 

See the Pen eNKYbG by osublake (@osublake) on CodePen

 

If all you are doing is a cube and using rotationY, then you could just make a list of the z-index values and then change the z-index on the faces every 45 degrees. All that matters is that the z-index of the faces you can see are higher than the ones in the back.

 

See the Pen 2dd7fe6825d3d3a54398906ef9c988e9 by osublake (@osublake) on CodePen

  • Like 3
Link to comment
Share on other sites

Thanks a lot. Your solution for z-index is really interesting plus I can use any ease with it. The second example is too complex for me to quickly wrap my head around.

 

Can I compare z value of divs for depth? and How?

Link to comment
Share on other sites

You can lay the sides out in 3D space, translating on the Z and setting the transform origin to rotate them into place.  Then just rotate the outer div.

 

Here's an example using ProStyle.  It's resizeable with trackbar.

 

See the Pen KdaewM?editors=101 by garyc (@garyc) on CodePen

Link to comment
Share on other sites

Hi Gary :)

 

pls check that in ie .

Link to comment
Share on other sites

Yep, when it comes to 3D, IE just doesn't support it.  You can do a bunch of complex math to try and emulate it on a 2D plane, or choose a much better browser. Luckily, Microsoft is moving most of their users to Edge, which does support 3D.

Link to comment
Share on other sites

Hello Gary,

 

Even though IE does not support transform-style: preserve-3d, but only flat. It does support 3D, you just have to animate each cube face separately. So instead of adding the perspective property on all the faces parent. You instead use the transform perspective  function.. i.e. transform: perspective(1000)  GSAP equivalent is transformPerspective

 

Cross browser 3D cube even in IE10 and above example:

 

See the Pen xiJLn by jonathan (@jonathan) on CodePen

 

Animating each face separately is tricky, but it is the only way to workaround IE not supporting the transform-style: preserve-3d  CSS property. GSAP equivalent is transformStyle

 

:)

  • Like 2
Link to comment
Share on other sites

Jonathan, thanks for the info and the example!

 

It would require a significant refactoring of ProStyle to support that and would circumvent the intrinsic layering.  I'm content with ProStyle not supporting 3D on IE (unless Microsoft every gets around to adding preserve-3d) especially since the majority of Windows users are moving to Edge.

 

Thanks,

Gary

Link to comment
Share on other sites

Hi Sahil,

 

Explaining how to do z-sorting in a forum post is kind of hard. I started out learning 3d from this book. The code is written for the canvas, but you can apply the same techniques to regular DOM elements. For that SVG demo, I modified some of the classes from this example, which basically requires you to convert every shape into a triangle using a Point3D class.

 

http://lamberta.github.io/html5-animation/examples/ch16/07-cube.html

 

Here's the source code for that example

https://github.com/lamberta/html5-animation/blob/master/examples/ch16/07-cube.html

https://github.com/lamberta/html5-animation/blob/master/examples/ch16/classes/point3d.js

https://github.com/lamberta/html5-animation/blob/master/examples/ch16/classes/triangle.js

https://github.com/lamberta/html5-animation/blob/master/examples/include/utils.js

  • Like 2
Link to comment
Share on other sites

You are great help on this forum, thanks a lot.

  • Like 1
Link to comment
Share on other sites

Glad I could help out. If you can, thank the author of that book by buying it. It's by far the best animation book I've come across. It may be written for the canvas, but in the end it's all just JavaScript. With the help of GSAP, I've been able to recreate every single one of the canvas experiments listed on the book's homepage using regular DOM or SVG elements (of course this does not include some of the pixel rendering and video techniques in Chapter 4).

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×