Jump to content
Search Community

3D Rotation - X Axis

Shakespeare test
Moderator Tag

Recommended Posts

Good morning my GSAP friends,

I am having difficulties understanding 3D Transforms and hope you can help me. The page I am looking to animate comprises an svg element and several buttons, which trigger different sets of animations, one of which rotates an element of the svg along the x-axis (the attached codepen is an oversimplification of my page but replicates the behavior I am experiencing). It seems to me like the "transformPerspective" and "rotationX" are being ignored. Evidently, I am missing something out but cannot figure out what it is. I very much appreciate your guidance!

Thanks,

See the Pen WNbMPaq by opeeff (@opeeff) on CodePen

Link to comment
Share on other sites

Hey Shakespeare.

 

3D transforms on SVG elements are not supported. You can work around it in some cases by animating the SVG itself or a container of the SVG. You can also fake it in some cases by animating other properties at times (like switching out rotateX for skewY).

 

I suppose it'd be good to mention this in our SVG "gotchas" thread.

  • Like 3
Link to comment
Share on other sites

2 hours ago, ZachSaucier said:

3D transforms on SVG elements are not supported.

Just to clarify, this isn't a limitation imposed by GSAP - it's just that SVG itself doesn't support 3D transforms. Some browsers have gone beyond the spec and allowed it, but it's a minority and I definitely wouldn't recommend building something that depends on 3D transforms of SVG elements. 

  • Like 3
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...