3D Rotation - X Axis

[Shakespeare]

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.

[ZachSaucier]

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.

[Shakespeare]

Hello ZachSaucier,

Thanks for your prompt reply. I tested your work around on the codepen I provided and it worked. Now time to test on the real scenario ? !!! I will let you know how it went.

Thanks again,

[GreenSock]

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.