Léo S Posted December 21, 2021 Share Posted December 21, 2021 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 Link to comment Share on other sites More sharing options...
Solution Cassie Posted December 21, 2021 Solution Share Posted December 21, 2021 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/ 2 1 Link to comment Share on other sites More sharing options...
Léo S Posted December 21, 2021 Author Share Posted December 21, 2021 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 ! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now