Using SVG to animate and flip a hexagon

问题

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 the vertical axis and expanding in size while keeping the bottom of the non flipped hexagon as the top of the new flipped hexagon.

My code is here:

<html>
  <style>    
    #test:hover {
      fill: yellow;
    }
  </style>
  <body>
    <div class="viewBox">
      <h1>SVG Testing</h1>
      <svg height="900" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;">
        <path d="M0 86.60254037844386L50 0L150 0L200 86.60254037844386L150 173.20508075688772L50 173.20508075688772Z" fill="green" id="test"></path>
      </svg>
    </div>
  </body>
</html>

What are my next steps?

Do I use a library to do this?

回答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

回答2:

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/

回答3:

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;
  }
  


  
}

<html>

<body>

    <div class="viewBox">
        <h1>SVG Testing</h1>


        <svg height="900" width="400" version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color: gray;">

            <path d="M0 86.60254037844386L50 0L150 0L200 86.60254037844386L150 173.20508075688772L50 173.20508075688772Z" fill="green" id="test"></path>
        </svg>
    </div>
</body>
</html>

来源：https://stackoverflow.com/questions/39110162/using-svg-to-animate-and-flip-a-hexagon

标签

jquery

css

svg

snap.svg

svg-animate