次のように機能する Web エフェクトを作成しようとしています。
(実際にはカードとは何の関係もありません。カードを類推として使用するだけです。実際には画像になります。また、カードの「スタック」はなく、ブラウザ ウィンドウ内の固定位置にすぎません。)
任意に配置されるカードがあり、「スタック」の位置があります。
カードにカーソルを合わせると、カードが反転し (rotateX 360deg)、「スタック」位置に変換されます。
マウスがどこにでも移動している間、そこにとどまります。
マウスが別のカードの上にある場合、スタック上のカードは元の場所に反転し、新しいカードはスタック位置に反転します。
等々...
私は Chrome 39 を使用していますが、可能な限り Web Animations 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>
どんな助けにも感謝します！