Cacher is the code snippet organizer for pro developers

<div class="flip">
    <div class="board is-front">

    </span>
    <span class="board is-back">

    </span>
</a>

div.flip {
    position: relative;

    @include transform-style(preserve-3d);
    @include perspective(0);

    .board {
        @include transition-duration(.3s);

        &.is-front {
            background: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);

            @include rotateY(0deg);

            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
        }

        &.is-back {
            position: absolute;
            top: 0;
            left: 0;
            background: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);

            @include rotateY(180deg);

            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            -moz-backface-visibility: hidden;
            -ms-backface-visibility: hidden;
        }
    }
    
    &:hover {
    	&.is-front {
    		@include rotateY(180deg);
    	}

    	&.is-back {
    		@include rotateY(0deg);
    	}
    }
}