Flipping Card

Flipping Card.markdown

Flipping Card

A Pen by Zachary Beyer on CodePen.

License.

index.html

<div class="flip-container">
	<div class="flipper" onclick="this.classList.toggle('flipped')">
        
		<div class="front">
            <h1>CARD FRONT</h1>
            <hr />
            <p>Etiam elit ipsum, tempus quis erat a, facilisis maximus ex. Morbi nec urna magna. Mauris diam mi, feugiat quis orci quis, bibendum egestas dolor. Etiam sed ex a sapien auctor scelerisque. Vestibulum vestibulum elit at accumsan dignissim. Mauris ut turpis ex. Donec bibendum porta nisi, in finibus urna faucibus in. Nunc congue ullamcorper eleifend. Vivamus porttitor, metus ut aliquam tristique, elit justo rhoncus libero, at blandit massa ante ac ipsum. Phasellus aliquam lacus eu mattis consectetur.</p>
            <hr />
            <h4>CARD FOOT</h4>

			<!-- front content -->
            
		</div>
		<div class="back">
    <h1>CARD BACK</h1>
    <hr />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis felis rhoncus, iaculis lorem vitae, varius diam. Duis nibh lectus, pellentesque ac semper ut, convallis in augue.</p>
    <hr />
    <h4>CARD BACKGROUND</h4>
		</div>
	</div>
</div>

style.css

/* MIXINS */
.box-sizing(@sizing:border-box) {
    -webkit-box-sizing: @sizing;
    -moz-box-sizing: @sizing;
    box-sizing: @sizing;
}

.border-radius (@radius: 0.5em) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

.top-perspective() {
        /*perspective*/
    -webkit-perspective:1000;
       -moz-perspective:1000;
        -ms-perspective:1000;
         -o-perspective:1000;
            perspective:1000;
}

 .flipped-transform () {
    /*transform*/
    -webkit-transform:rotateY(180deg);
       -moz-transform:rotateY(180deg);
        -ms-transform:rotateY(180deg);
         -o-transform:rotateY(180deg);
            transform:rotateY(180deg);
}

.flipper-transform(@transition: 0.3s) {
    /*transition*/
    -webkit-transition:0.6s;
       -moz-transition:0.6s;
         -o-transition:0.6s;
            transition:0.6s;
    /*transform-style*/
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

.back-side-hidden() {
        /*backface-visibility*/
    -webkit-backface-visibility:hidden;
       -moz-backface-visibility:hidden;
        -ms-backface-visibility:hidden;
         -o-backface-visibility:hidden;
            backface-visibility:hidden;
}

/* STYLE SHEET */

body {
    font-family: "myriad-pro", sans-serif;
    font-size:100%;
    
    color:#D1D1D1;
    
    padding: 0;
    background-color:#333333;
    
    margin:0 auto;
    padding: 0;
}


.flip-container {
    display:block;
    margin:0 auto;
    .top-perspective();
}	

.flipped {
    .flipped-transform ();
}

/* flip speed goes here */
.flipper {
    .flipper-transform();
    width:100%;
    height:100%;
    position:relative;
}
.flip-container, .front, .back {
    text-align:center;
    color:#333333;        
    
	width: 15em;
	height: 21em;
    padding: 1em;
}

.front, .back {
    /* hide back of pane during swap */
    overflow:hidden;
    
    display:inline-block;
    .back-side-hidden();
    
    /* Card overlay eachother */
	position: absolute;
	top: 0;
	left: 0;
    
    /* Make Pretty */

    .box-sizing();
    .border-radius();    
    width:100%;
    height:100%;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
    background-color:#D1D1D1;
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
    background-color:#EBEBEB;
}

/* Media Queries */

/*
@highdensity: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
              ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
              ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
              ~"only screen and (min-device-pixel-ratio: 1.5)";
*/

@mobile:      ~"only screen and (max-width: 34em)";
@tablet:      ~"only screen and (min-width: 34em) and (max-width: 55em)";
@desktop:     ~"only screen and (min-width: 55em)";

@media @mobile {
    .flip-container, .front, .back {
        width: 18em;
        height: 21em;
        
        h1, h2, h3 {
            font-size: 1.25em;
        }
    }
}

@media @tablet {
        .flip-container, .front, .back {
        width: 21em;
        height: 30em;
        
        h1, h2, h3 {
            font-size: 1.75em;
        }
    }
}

@media @desktop {
    .flip-container, .front, .back {
        width: 29em;
        height: 40em;
        
    }
}