Setting a rotationY gives big vertical scroll

[PixeledCode]

Trying to create a 3d carousel thingy and this is one of the approaches which is kind of working. Except that setting rotationY is giving scroll. First it was both side scroll but setting overflow-x: clip fixes one side but drastically increases the other one. 
Also, the rotation is not looking natural. Bottom side of card is tilted but top is straight.

Any help is appreciated

See the Pen RwdVvPY?editors=0010 by PixeledCode (@PixeledCode) on CodePen

[akapowl]

Hello there.

This forum is actually meant for GSAP specific questions - like e.g. about the API etc. - Everything you mention really just are CSS styling issues though.

If you want to know what's causing that huge vertical overflow, uncomment the 'backface-visibility: hidden' on your boxes and you will see that the perspective is sort of odd (I scaled your .stage down in this example so it becomes more apparent on first look), so you might want to change your perspective value.

See the Pen mdowBrG by akapowl (@akapowl) on CodePen

 

58 minutes ago, PixeledCode said:

Also, the rotation is not looking natural. Bottom side of card is tilted but top is straight.

To change that, you will need to position your boxes properly within that perpective - that is within the container that holds the perspective.
So to make it look 'symmetrically tilted' for bottom and top, logically they will need to be in the vertical center of the element that has the perspective.

Here is your example with all that (and some more CSS styling on nav and body) changed.

See the Pen WNmOZRe by akapowl (@akapowl) on CodePen

 

If you are having problems understanding how to work with 3D transforms to set things up as you wish in the first place, I would suggest having a look at this guide for example.

https://3dtransforms.desandro.com/



And since I mentioned it earlier, here's one thing about the GSAP API;

You don't need to wrap everything in a css object inside the vars object; you can just target the properties directly in the vars object like so.
 

// no need to do this
  
gsap.set(stage, {
  css: {
    perspective: 1800,
    transformStyle: "preserve-3d"
  }
});

// you can just do this instead

gsap.set(stage, {
    perspective: 1800,
    transformStyle: "preserve-3d"
});

But I'll leave it up to you to change that in your codebase.

Cheers.
 

[PixeledCode]

1 hour ago, akapowl said:

Hello there.

This forum is actually meant for GSAP specific questions - like e.g. about the API etc. - Everything you mention really just are CSS styling issues though.

If you want to know what's causing that huge vertical overflow, uncomment the 'backface-visibility: hidden' on your boxes and you will see that the perspective is sort of odd (I scaled your .stage down in this example so it becomes more apparent on first look), so you might want to change your perspective value.
 

 

 

 

 

 

 

To change that, you will need to position your boxes properly within that perpective - that is within the container that holds the perspective.
So to make it look 'symmetrically tilted' for bottom and top, logically they will need to be in the vertical center of the element that has the perspective.

Here is your example with all that (and some more CSS styling on nav and body) changed.
 

 

 

 

 

 

 

If you are having problems understanding how to work with 3D transforms to set things up as you wish in the first place, I would suggest having a look at this guide for example.

https://3dtransforms.desandro.com/



And since I mentioned it earlier, here's one thing about the GSAP API;

You don't need to wrap everything in a css object inside the vars object; you can just target the properties directly in the vars object like so.
 

// no need to do this
  
gsap.set(stage, {
  css: {
    perspective: 1800,
    transformStyle: "preserve-3d"
  }
});

// you can just do this instead

gsap.set(stage, {
    perspective: 1800,
    transformStyle: "preserve-3d"
});

But I'll leave it up to you to change that in your codebase.

Cheers.
 

Thank you for your detailed thoughts on this. Can you also recommend some more resources on 3d transformations?

[akapowl]

21 hours ago, PixeledCode said:

Can you also recommend some more resources on 3d transformations?

Besides from what I already mentioned, nothing in particular for the basics, no.

Just about anything you can find on a search-engine of your choice should help get a better understanding of the basics.

If you want to delve deeper, like when grappling more specific problems, you can search sites like e.g. CSS-Tricks for '3D' for more specific articles like these:

https://css-tricks.com/state-responsive-3d-shapes/
https://css-tricks.com/things-watch-working-css-3d/

https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/