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

Here is what I came up with really quick with the info we were given.

#test:hover
{
  fill: yellow;
  transform:rotateX(-180deg) translateY(-100%) scale(1.2);
  transition:ease 1s all;
  transform-style: preserve-3d;
  transform-origin: 100%;
}

Below is the jsfiddle. This may need -webkit modding to be usable on all browsers. https://jsfiddle.net/9xqqc1yk/