Using SVG to animate and flip a hexagon

后端未结

关注

 3  2008

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

相关标签:

3条回答

鱼传尺愫

2021-01-25 19:08
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
0 讨论(0)
发布评论:

提交评论
- 加载中...
伪装坚强ぢ

2021-01-25 19:12
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/
0 讨论(0)
发布评论:

提交评论
- 加载中...

谎友^

2021-01-25 19:16

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>

0 讨论(0)