Pure CSS3 3D flips written with Sass and packaged with Bower

Beemuse 3D Flips

...

Usage

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 :)

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>

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);
    }
}

CSS

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip:hover .flip-back {
    z-index: 10;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

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

Code licensed under the MIT License