Beemuse 3D Flips
Relatively-positioned .flip element (containing absolutely-positioned .flip-front and .flip-back elements) requires width and height to be specified (width, to avoid the flip trigger area from auto-expanding in its containing element, and height, including a bottom margin of your choosing). Keep in mind how setting these may affect responsive versions of .flip elements (the width and height may need to be reset at the appropriate breakpoints).
Degrades gracefully (simply shows back or front without animation). IE10+ support.
<div class="flip" style="width: X.px; height: X.px;"> <a href="#"> <div class="flip-front"> ... </div> <div class="flip-back"> ... </div> </a> </div>
Code licensed under the MIT License