Jump to content
Search Community

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

Steven Ross test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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 comment
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 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.
  • Create New...