Jump to content


Can I rotate a svg element in 3d?

Moderator Tag

Recommended Posts

I'm trying to create a folding animation with svg elements. But unfortunately rotationY (or other 3d methods) does not seem to work. Any suggestions? 

See the Pen YzaBGae by lollibomb (@lollibomb) on CodePen

Link to comment
Share on other sites



Transforms in SVG are always in 2D so in order to have a 3D effect in SVG you'll have to resort to a mix of shape animations and perhaps playing with some shadows or gradient colors (I would go with gradients, since filters in SVG don't perform very well).


SVG is not my strongest suit and my experience with it is limited, but I would try using the MorphSVG Plugin and animating gradients at the same time.


I know that @Cassie, @PointC and @mvaneijgen know their way around SVG pretty well, so hopefully they can chime in and share some of their wisdom on the subject.


Sorry I can't be of more assistance but my general SVG knowledge is a limitation.


Happy Tweening!

Link to comment
Share on other sites

I had no idea you couldn't use 3D transforms inside SVGs! I would be something like this or like what @Rodrigo said morph between shapes.


Hope it helps and happy tweening! 


See the Pen mdKRwXg by mvaneijgen (@mvaneijgen) on CodePen

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.