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

I made something like, just check it out.. is that?

#test{
  animation-fill-mode: forwards;
  animation-timing-function: linear;
  animation: hexagon 4200ms 1;
  -webkit-animation-delay: 2600ms;/* Chrome, Safari, Opera */
  animation-delay: 2600ms;
  -webkit-animation-iteration-count: infinite; 
  animation-iteration-count: infinite;
}

@keyframes hexagon{
  0%,100%{
     rotateX(0deg);
       fill: green;
     -ms-transform: scale(1, 1); 
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
   transform-origin: 0px;
  }
  
 30%{
    fill: green;
     -ms-transform: scale(1, 0.08); 
    -webkit-transform: scale(1, 0.08);
    transform: scale(1, 0.08);
   transform-origin: 0px 90px;
  }
  
  50%{
      fill: yellow;
     -ms-transform: scale(1, 1); 
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
   transform-origin: 0px;
  }
  70%{
      fill: yellow;
     -ms-transform: scale(1, 0.08); 
    -webkit-transform: scale(1, 0.08);
    transform: scale(1, 0.08);
   transform-origin: 0px 90px;
  }
  


  
}

    

        
SVG Testing