Rotate SVG Path in y-axis

[Volt 22]

Hello,

 

How can I rotate an SVG path in the y-axis only?

See the Pen dyQOjmN by Iam_Jesse (@Iam_Jesse) on CodePen

[akapowl]

 

Hello @Volt 22

Unfortunately the short answer is: you can't.

While you can apply 3D transforms to an SVG element itself, paths and shapes in SVGs don't support 3D transforms - that is just a limitation of SVG.

If you won't have a perspective applied anyway, a scaleX to 0 might have a very similar visual effect, though.

Beside that, another thing you could try is morph the SVG path to a shape similar to what it would have if you were to transform it in 3D space.

You'll likely want to have a look at the MorphSVGPlugin in that case.
 

[Volt 22]

Hello @akapowl,

 

Thank you for your reply.

 

I did a scaleX instead, the animation is similar to what I want to achieve.