Flippable
The flip effect simulates a flip between a front and back view of an object
by means of a 3D rotation. The DOMFlippable class implements this effect for two
DOM nodes, one as the front view, the other as the back view. Both views are connected
via a HTML template that defines the placeholders for front and back views. The
style file "css/flipeffect.css" holds reasonable default styles for this kind of
templates.
The SVG buttons have to be wrapped in an HTML DOM element which handles events. Otherwise,
the viewbox of the SVG will interfere with the coordinate transformation.
<template id="flipTemplate">
<div class="flipWrapper">
<div class="flipCard">
<div class="flipFace front"></div>
<div class="flipFace back" style="visibility:hidden;"></div>
</div>
<svg class="flipButton backBtn" .../>
<svg class="flipButton infoBtn" .../>
</div>
</template>
Example