使用SVG动画和翻转六边形

我从来没有真正使用过SVG，而是现在阅读一些关于它的教程并测试了一些东西。 我正在学习如何制作像六边形的形状但现在需要使其在垂直轴上向下翻转并扩大尺寸，同时保持非翻转六边形的底部作为新的翻转六边形的顶部。

我的代码在这里：

  #test:hover { fill: yellow; }   
 
SVG Testing
    
   

我接下来的步骤是什么？

我是否使用库来执行此操作？

Answer 1

你可以使用Snap，因为你用这个标记了问题。

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

翻译’t’以及缩放”，因为底线会在放大时自动漂移（或者你可以从中心缩放）。

的jsfiddle

Answer 2

以下是我提供的信息非常快速。

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

下面是jsfiddle。 这可能需要-webkit modding才能在所有浏览器上使用。 https://jsfiddle.net/9xqqc1yk/

Answer 3

我做了类似的东西，只是检查一下..是吗？

 #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