I am trying to make a web effect that works like this:
(It actually has nothing to do with cards, just using cards as an analogy; it will actually be an image. And there is no "stack" of cards, it is just a fixed position in the browser window.)
There are cards placed arbitrarily, and there is a "stack" position.
Hover over a card, and it flips (rotateX 360deg) and translates into the "stack" position.
It remains there while the mouse moves around wherever.
If the mouse hovers over another card, the one on the stack flips back to where it originally was, while the new card flips into the stack position.
And so on...
I am using Chrome 39 and want to do this with the Web Animations API if at all possible, because I believe it will yield the nicest representation. If not, any possible solution Chrome 39 easily supports: CSS, JQuery, JavaScript, Dart, QML, etc.
This junky little animation is all I've got:
<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>
Appreciate any help!