Using SVG to animate and flip a hexagon

Question

I have never really used SVGs but reading some tutorials about it now and tested some stuff. I am learning how to make shapes like a hexagon but now need to make it flip down on

Answer 1

You can use Snap, as you have tagged the question with that..

Snap('#test').animate({ transform: 't0,260s2,-2'},2000, mina.bounce)

translate 't' as well as scale 's' as the bottom line would automatically drift change whilst scaling up (or you could scale from the center).

jsfiddle