Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Steven Ross

3d transform results in 'flip'... any way to add more depth?

Recommended Posts

I am attempting to create more 'depth' in a 3d transform to match a CSS transform I currently use.   The current greensock transform renders more as a flat card flip than a cube rotate. 

 

I have set up a CodePen sample of both the CSS transform and corresponding GreenSock transform side by side.  I'm looking to make the greensock version have the same depth as the css version.  I'm thinking I need to get some 'skew' properties involved but I am getting no where.  Any ideas?  Thanks in advance..

 

(note: I've only have this pen set up for FF to simplify the code)

 

See the Pen jkwHq by stevenmross (@stevenmross) on CodePen

Link to post
Share on other sites

Hello Steven Ross, and Welcome to the GreenSock Forums!

 

Instead of perspective() which applies the perspective to the children it is set on. You can try and use transform perspective() (transformPerspective) which is set within your transform function and applies perspective to the element it self.

 

Example here:

See the Pen jkwHq by stevenmross (@stevenmross) on CodePen

 

If you do that you propbably wont need the parents perspective() on .cardWrapper

 

But since you have your transform-origin set to mixed values of a keyword left (0%) and 65px .. mixing both percentage and pixels the transform-origin. When you mix values, percentages and pixels or ems.. it uses a calc() function to calculate the mixed values, since both transform-origin X and Y are not set to the same unit length or percentage.. so only one side will show the perspective depth when animating.. in this case on the right since the keword left is being used..

 

More info on transform-origin: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

 

Also you might want to remove the overflow:hidden property, so you can see all overflow from the element's perspective while it is transforming.

 

Does this help? :)

  • Like 2
Link to post
Share on other sites

Good call, thanks Jonathan, I appreciate the response... I'll give this a shot.

Link to post
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.

×