Rotate an svg component through an isometric direction

[Léo S]

I would like to rotate an svg component through an isometric direction.

Of course if I use a simple rotate, the element rotate through the Z direction (direction of the "camera") and does not produce the desired effect. See the associated CodePen.

 

Instead, I try to rotate the component through the direction normal to the plane:

 

Is it possible using RotationX, RotationY, RotationZ ?

If yes, would it be possible to have an example ?

 

Thanks !

See the Pen vYZdexR by ingeloop (@ingeloop) on CodePen

[Cassie]

Heya @Léo S,

 

So, there's no 3D space in SVG - the cog you've got in that pen is drawn to look like it has perspective but it's actually just a squashed cog.

If I were you I would use an image (not squashed) inside a div - then you can make use of 3D CSS.

 

This is a great article to learn about setting up a 3d css scene...

https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/ 

[Léo S]

Thanks @Cassie for your quick reply !

That makes sense, I will use a flat version of my image, and manage the 3d aspects in css. Thanks for the link also !