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.
<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>