.transition (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; -webkit-transition: @value; -moz-transition: @value; -ms-transition: @value; -o-transition: @value; transition: @value; }
.transform (@value1,@value2:X,...) { @value: ~`"@{arguments}".replace(/[\[\]]|\,\sX/g, '')`; transform:@value; -ms-transform:@value; -webkit-transform:@value; -o-transform:@value; -moz-transform:@value; }
.transform-style(@style:preserve-3d) { transform-style:@style; -webkit-transform-style:@style; -moz-transform-style:@style; -ms-transform-style:@style; }
.backface-visibility-hidden { backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.perspective(@amount: 1000px) { perspective:@amount; -webkit-perspective:@amount; -moz-perspective:@amount; -ms-perspective:@amount; }
.tile { color:white; padding:15px; box-sizing:border-box; -moz-box-sizing:border-box; }


.flipper-container {
    float:left;
    width:250px;
    height:250px;
    margin-right:15px;
    display:block; .perspective;

    span {
        color:white;
    }

    >div.flipper {
        float:left;
        width:100%;
        height:100%;
        position:relative;
        .transform-style(preserve-3d);

        .front, .back {
            float:left;
            display:block;
            width:100%;
            height:100%;
            .backface-visibility-hidden;
            position:absolute;
            top:0;
            left:0;
            .transform-style(preserve-3d);
            .transition(-webkit-transform ease 500ms);
            .transition(transform ease 500ms);
        }

        .front {
            z-index:2;
            background:#19489E;

            /* front tile styles go here! */
        }

        .back {
            background:#9E1919;

            /* back tile styles go here! */
        }
    }
}

.flipper-container.horizontal {
    .front { .transform(rotateY(0deg)); }
    .back { .transform(rotateY(-180deg)); }

    div.flipper.flipped {
        .front { .transform(rotateY(180deg)); }
        .back { .transform(rotateY(0deg)); }
    }
}

.flipper-container.vertical {
    .front { .transform(rotateX(0deg)); }
    .back { .transform(rotateX(-180deg)); }

    div.flipper.flipped {
        .front { .transform(rotateX(180deg)); }
        .back { .transform(rotateX(0deg)); }
    }
}