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.

Credit: homebrewed as most demos use javascript or don't get it quite right :)


<div class="flip" style="width: X.px; height: X.px;">
    <a href="#">
        <div class="flip-front">
        <div class="flip-back">

Designed and built with all the buzz in the world @itmustbe

Code licensed under the MIT License