Have you ever built CSS 3D flip cards? If you found the process tedious, perhaps this is the solution. Using Polymer, this demo shows how creating flip cards can be as simple as:
<flip-card>
<front>Flip me</front>
<back>You flipped me</back>
</flip-card>You can put whatever markup you want inside the <front> and <back> tags.
Advanced Example:
<flip-card axis="x" nohover flipped="{{flipped}}">
<front>Front of card</front>
<back><my-element></my-element></back>
</flip-card>
<input type="checkbox" checked="{{flipped::changed}}">flip
<script>
// Just flip
document.querySelector('flip-card').toggle();
// show the back
document.querySelector('flip-card').showBack();
// show the front
document.querySelector('flip-card').showFront();
// will reveal the back side (my-element child polymer element)
document.querySelector('my-element').fire('show');
</script>axis:
yaxis is what you typically see. It flips left to right. The<flip-card>defaults to Y if you omit the attribute.xaxis means it turns upside-down while it flips.
noHover: To disable the auotomatic flipping on mouseover add the noHover attribute. The card can be flipped using either one of the methods below, data-binding or firing an event.
showBackshows the backsideshowFrontshows the frontsidetoggleflips the card
flipped: A boolean flag that specifies if the card is flipped or not
show: If this event is fired by a child element inside thebackorfrontit will reveal the corresponding sideflipend: Is fired when the flipping animation is finished.
stickattribute means you click on them to interact instead of hovering. They stay put after you click.noHoverattribute)directionattribute allows you to flip one way or the other. Think clockwise vs counter-clockwise.originattribute lets you specify a CSS transform-origin, meaning the card can appear to be hinged from one side.
It should go without saying, but a plain CSS implementation of this is much more lightweight than using Polymer. I made this in order to learn about Polymer and Web Components. So there you have it.