Card Flip

Fixed position expanding card flip

by rgthree

HTML

<div class="cardbox">
    <div class="card">
        <div>Front</div>
        <div>Back</div>    
    </div>    
</div>

CSS

.cardbox {
    position:fixed;
    top:100px;
    left:100px;
    right:100px;
    bottom:100px;
    -webkit-perspective:1000px;
    -webkit-transform:translateZ(0);
    -webkit-transition:all 1s ease-in-out;
}
.card,
.card > * {
    position:absolute;
    top:0px;
    left:0px;
    right:0px;
    bottom:0px;
}

.card {
    -webkit-transform: rotateY(0deg) translateZ(0);
    -webkit-transform-style:preserve-3d;
    -webkit-transition:all 1s ease-in-out;
}
.card > * {
    box-shadow:0px 0px 15px #000;
    -webkit-backface-visibility:hidden;
}
.card > *:first-child {
    background:#FC0;
}
.card > *:last-child {
    background:#F0C;
    -webkit-transform:rotateY(180deg) translateZ(0);;
}

/* Flipped */
.cardbox:hover {
    top:10px; left:10px; right:10px; bottom:10px;
}
.cardbox:hover .card {
    -webkit-transform:rotateY(180deg) translateZ(0);
}