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