Flipper

by Nick Karnik

HTML

<input type=button id=test value='asd' onclick='document.querySelector("#myCard").classList.toggle("myflip")'/>

<div class="flipperContainer"  >
	<div  class="flipper" id=myCard>
		<div class="flipperFront">asdasdfadf
		</div>
		<div class="flipperBack">asasd
		</div>
	</div>
</div>

CSS

/* entire container, keeps perspective */
.flipperContainer {
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -webkit-perspective: 1000;
    perspective: 1000;
}
	


.flipperContainer, .flipperFront, .flipperBack {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.flipperFront, .flipperBack {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

/* front pane, placed above back */
.flipperFront {
	z-index: 2;
    background-color: green;
}

/* back, initially hidden pane */
.flipperBack {
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    background-color: red;
}

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