3d card flip css

3dflip.html

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

3dflip.scss

@import "compass/css3";
 
/* 3D Flips */
 
.flip {
    position: relative;
    @include perspective(1000);
    .flip-front, .flip-back {
        position: absolute;
        top: 0;
        left: 0;
        @include transform-style(preserve-3d);
        @include backface-visibility(hidden);
        @include transition(0.75s);
    }
    .flip-front {
        z-index: 5;
    }
    .flip-back {
        z-index: 0;
        @include rotateY(-180deg);
    }
    &:hover .flip-front {
        z-index: 5;
        @include rotateY(180deg);
    }
    &:hover .flip-back {
        z-index: 10;
        @include rotateY(0deg);
    }
}