使用Web Animations API将元素翻转到特定位置

时间:2014-12-20 02:22:28

标签: javascript jquery dart css-animations web-animations

我正在努力制作一个像这样的网络效果:

(它实际上与卡片没有任何关系,只是使用卡片作为类比;它实际上是一个图像。而且没有"堆叠卡片,它只是一个固定的位置浏览器窗口。)

有任意放置的牌,并且有一个"堆栈"位置。

将鼠标悬停在卡片上,然后翻转(旋转X 360度)并转换为"堆叠"位置。

当鼠标在任何地方移动时,它仍然存在。

如果鼠标悬停在另一张卡片上,那么堆叠中的那只卡片会翻回原来的位置,而新卡片会翻转到堆叠位置。

等等......

我正在使用Chrome 39,并希望尽可能使用网络动画API,因为我相信它会产生最好的代表性。如果没有,Chrome 39可以轻松支持任何可能的解决方案:CSS,JQuery,JavaScript,Dart,QML等。

这个垃圾小动画就是我所有的:

<html>
<head><title>Choose a card</title></head>
<body>
<div class="card" style="width:50px;">Foo</div>
<div class="card" style="width:50px;">Bar</div>
<div class="card" style="width:50px;">Baz</div>
<div class="card" style="width:50px;">Qux</div>
<script>
  var elem=document.querySelector('.card');
  var player=elem.animate([
      {transform:"rotateX(180deg) scale(2) translate(10px,10px)"},
      {transform:"rotateX(360deg) scale(3) translate(200px,200px)"}
    ],
    {
      direction: "forward", duration: 250, iterations: Infinity
    });
</script>
</body>
</html>

感谢任何帮助!

0 个答案:

没有答案