Question

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

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

有任意放置的牌，并且有一个＆＃34;堆栈＆＃34;位置。

将鼠标悬停在卡片上，然后翻转（旋转X 360度）并转换为＆＃34;堆叠＆＃34;位置。

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

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

等等......

我正在使用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>

感谢任何帮助！

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

0 个答案: