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.

    <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