Simple 3d rotate on SVG paths not working. Please help!

[randometc]

I’m trying to do a simple 3D animation of some letters within an SVG. I can do a 2D animation so I know my selectors are correct, but cannot do the not 3D version. I want the letters to simply rotate 180 degrees horizontally once.

 

The letters themselves are path elements within the SVG

 

I set the perspective on the container, in this case the SVG itself and then set transformStyle:"preserve-3d" on the letters, in this case the individual paths. 

 

Any help would be tremendously appreciated. Thank you, this is my first post!

See the Pen rKvEge by randometc (@randometc) on CodePen

[GreenSock]

Welcome to the forums, @randometc. 

 

The SVG spec itself doesn't accommodate 3D, so what you're attempting isn't really possible in most browsers. That's unrelated to GSAP.  You can, however, apply a 3D transform to an <svg> element itself (not the guts of an SVG, just the outer element). 

[randometc]

Got it! thank you much for the help