Rotate svg element 3d with javascript or jquery

[Rasool Ghafari]

I have this below svg in my web application:

and i have two buttons to rotate this element clockwise/anticlockwise 3d through y axis when user click on each button, how can i do that? is it possible to do it with Snapsvg?

There is also this question on SO:

https://stackoverflow.com/questions/61685984/rotate-svg-element-3d-with-javascript-or-jquery

[Ian]

No, this isn't possible with Snap afaik, and not really in SVG at all. Depending on what you need, you may be able to apply some 3d transforms in css. Otherwise I think you'd have to use some 3d matrix lib or something to recalculate all your paths points etc.

[Peter Sersch]

It is possible. It's not a 3D Solution, but on the screen it looks like the thing rotates. You only have to define the line where the objects should rotate along and it will work.
And Ian, why are your first words it's not possible. Did you ever check the hole libary of snapsvg? It's made for doing animation in SVG and I don't see a thing you can not do (maybe with some lib's) , but you can do so much with it.

[Ian]

Crikey, this was over 2 years ago, I can't even remember looking at this :D. I probably agree, I shouldn't have said it's not possible...more that if you need to ask, it's maybe possible, but there's not enough info, and it will be a lot of work.

Devil is in the detail I guess of what actually the original SVG is. 

What happens to the lower pots when you rotate it by 90 degrees ?

[Peter Sersch]

You have to move the color and the pots along a oval form wich fitts to the colorpalette ;-) and then it will work. You can move it then clockwise or anticlockwise by using negativ or positiv numbers.

[Ian]

What IS the SVG of the lower red pot, and what happens to the base of the red pot when rotated minus 15 degrees...is it still visible ?