Can I rotate a svg element in 3d?

[Lollibomber 1 Likes (Newbie)]

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

[Rodrigo 5,087 Likes (Superhero)]

Hi,

 

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!

[mvaneijgen 1,558 Likes (Superhero)]

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