<script src="http://css3playground.com/3d-flip-cards/js/modernizr.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>


<script>
  // For IE11. May we one day live without your BS.
  Modernizr.addTest('preserve3d', function(){return Modernizr.testAllProps('transformStyle', 'preserve-3d');});
</script>

<style type="text/css">
	body {
		max-width: 100%;
	}
	.panel {
		float: left;
		width: 200px;
		height: 200px;
		margin: 20px;
		position: relative;
		font-size: .8em;

		-webkit-perspective: 600px;
		-moz-perspective: 600px;
						perspective: 600px;
	}
	/* -- make sure to declare a default for every property that you want animated -- */
	/* -- general styles, including Y axis rotation -- */
	.panel .front {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #6b7077;
		text-align: center;
		box-shadow: 0 1px 5px rgba(0,0,0,0.9);

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}
	.panel.flip .front {
		z-index: 900;
		border-color: #eee;
		background: #333;
		box-shadow: 0 15px 50px rgba(0,0,0,0.2);

		-webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
						transform: rotateY(180deg);
	}

	.panel .back {
		float: none;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 800;
		width: inherit;
		height: inherit;
		border: 1px solid #ccc;
		background: #333;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.6);

		-webkit-transform: rotateY(-180deg);
			 -moz-transform: rotateY(-179deg); /* setting to 180 causes an unnatural-looking half-flip */
						transform: rotateY(-179deg);

		-webkit-transform-style: preserve-3d;
			 -moz-transform-style: preserve-3d;
						transform-style: preserve-3d;

		-webkit-backface-visibility: hidden;
			 -moz-backface-visibility: hidden;
						backface-visibility: hidden;

		/* -- transition is the magic sauce for animation -- */
		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}

	.panel.flip .back {
		z-index: 1000;
		background: #80868d;

		-webkit-transform: rotateX(0deg) rotateY(0deg);
			 -moz-transform: rotateX(0deg) rotateY(0deg);
						transform: rotateX(0deg) rotateY(0deg);

		box-shadow: 0 15px 50px rgba(0,0,0,0.2);
	}

	/* -- X axis rotation for click panel -- */
	.click .front {
		cursor: pointer;
		-webkit-transform: rotateX(0deg);
			 -moz-transform: rotateX(0deg);
						transform: rotateX(0deg);
	}
	.click.flip .front {
		-webkit-transform: rotateX(180deg);
			 -moz-transform: rotateX(180deg);
						transform: rotateX(180deg);
	}
	.click .back {
		cursor: pointer;
		-webkit-transform: rotateX(-180deg);
			 -moz-transform: rotateX(-180deg);
						transform: rotateX(-180deg);
	}
	.click.flip .back {
		-webkit-transform: rotateX(0deg);
			 -moz-transform: rotateX(0deg);
						transform: rotateX(0deg);
	}

  /* -- contact panel -- */
  .contact {
    width: 290px;
    height: 240px;
  }

	/* -- diagonal axis rotation -- */
	.diagonal .front {
		-webkit-transform: rotate3d(45,45,0,0deg);
			 -moz-transform: rotate3d(45,45,0,0deg);
						transform: rotate3d(45,45,0,0deg);
	}
	.diagonal .front:hover {
		/* for the patient :) */
		-webkit-transition-duration: 10s;
			 -moz-transition-duration: 10s;
						transition-duration: 10s;

		-webkit-transform: rotate3d(45,45,0,-36deg);
			 -moz-transform: rotate3d(45,45,0,-36deg);
						transform: rotate3d(45,45,0,-36deg);
	}

	.diagonal.flip .front,
	.diagonal.flip .front:hover {
		-webkit-transform: rotate3d(-45,-45,0,150deg);
			 -moz-transform: rotate3d(-45,-45,0,150deg);
						transform: rotate3d(-45,-45,0,150deg);

		-webkit-transition: all .4s ease-in-out;
						transition: all .4s ease-in-out;
	}

	.diagonal .front .message {
	  opacity: 0;
		font-size: 1.4em;
	}
	.diagonal .front:hover .message {
		opacity: .4;
		-webkit-transition-duration: 12s;
			 -moz-transition-duration: 12s;
						transition-duration: 12s;

		-webkit-transition-delay: 4s;
			 -moz-transition-delay: 4s;
						transition-delay: 4s;

		-webkit-transform: translateX(-30px) translateZ(40px) scale(1.4);
			 -moz-transform: translateX(-30px) translateZ(40px) scale(1.4);
						transform: translateX(-30px) translateZ(40px) scale(1.4);
	}
	.diagonal.flip .front .message {
		-webkit-transition-duration: 1s;
						transition-duration: 1s;
	  -webkit-transform: translateZ(0px) scale(.5);
					  transform: translateZ(0px) scale(.5);
	}

	.diagonal .back {
		-webkit-transform: rotate3d(45,45,0,-180deg);
			 -moz-transform: rotate3d(45,45,0,-180deg);
						transform: rotate3d(45,45,0,-180deg);
	}
	.diagonal.flip .back {
		-webkit-transform: rotate3d(45,45,0,-30deg);
			 -moz-transform: rotate3d(45,45,0,-30deg);
						transform: rotate3d(45,45,0,-30deg);
	}

  /* -- swing like a gate -- */
  .swing .front,
  .swing .back {
    width: 140px;
    -webkit-backface-visibility: visible;
			 -moz-backface-visibility: visible;
						backface-visibility: visible;

    -webkit-transition-duration: 1s;
			 -moz-transition-duration: 1s;
						transition-duration: 1s;

    -webkit-transform-origin: 170px 0;
			 -moz-transform-origin: 170px 0;
						transform-origin: 170px 0;
  }
  .swing .front {
    -webkit-transform: rotateY(0deg);
			 -moz-transform: rotateY(0deg);
						transform: rotateY(0deg);
  }
  .swing .back {
    background-color: #555; /* hiding this side, so get darker */
    -webkit-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
			 -moz-transform: rotateY(-180deg) translateX(198px) translateZ(2px);
  }

  .swing.flip .front {
    background-color: #222; /* hiding this side, so get darker */
    -webkit-transform: rotateY(180deg);
			 -moz-transform: rotateY(180deg);
  }
  .swing.flip .back {
    background-color: #80888f;
    -webkit-transform: rotateY(0deg) translateX(198px) translateZ(2px);
			 -moz-transform: rotateY(0deg) translateX(198px) translateZ(2px);
  }


	/* -- cosmetics -- */
	.panel .pad {padding: 0 15px; }
	.panel.flip .action {display: none; }
	.block ol li {text-align: left; margin: 0 0 0 28px; }
	.block .action {display: block; padding: 3px; background: #333; text-align: right; font-size: .8em; opacity: 0; position: absolute; cursor: pointer; -webkit-transition: opacity .2s linear; }
	.block:hover .action {opacity: .7; }
	.circle div {border-radius: 100px; }
	.circle div h2 {padding-top: 3em; text-align: center; }

</style>
<script>
	$(document).ready(function(){

		// set up hover panels
		// although this can be done without JavaScript, we've attached these events
		// because it causes the hover to be triggered when the element is tapped on a touch device
		$('.hover').hover(function(){
			$(this).addClass('flip');
		},function(){
			$(this).removeClass('flip');
		});

		// set up click/tap panels
		$('.click').toggle(function(){
			$(this).addClass('flip');
		},function(){
			$(this).removeClass('flip');
		});

		// set up block configuration
		$('.block .action').click(function(){
			$('.block').addClass('flip');
		});
		$('.block .edit-submit').click(function(e){
			$('.block').removeClass('flip');

			// why not update that list for fun?
			$('#list-title').text($('#form_title').val());
			$('#list-items').empty();
			for (var num = $('#form_items').val(); num >= 1; num--) {
				$('#list-items').append('<li>Super seller</li>');
			}
			e.preventDefault();
		});

		// set up contact form link
		$('.contact .action').click(function(e){
			$('.contact').addClass('flip');
			e.preventDefault();
		});
		$('.contact .edit-submit').click(function(e){
			$('.contact').removeClass('flip');
			e.preventDefault();
		});

	});
</script>


<div class="hover panel">
	<div class="front">
	  <div class="pad">
      <h2>Mouse Over Me!</h2>
      <p>
        The effect on this box can be done using 100% CSS.<br><br>
        The other boxes all require some Javascript, but the animation is driven by CSS3.
      </p>
		</div>
	</div>
	<div class="back">
		<div class="pad">
			<h2>check you on the flip side</h2>
		</div>
	</div>
</div>

<div class="contact panel">
	<div class="front">
		<h3>Contact Us</h3>
		Acme, Co.<br>
		123 Easy St.<br>
		Austin, TX 78731
		<p>Or <a class="action" href="#form">send us a message</a></p>
	</div>
	<div class="back" id="contact">
		<div class="pad">
			<h3>Send us a Fake Message</h3>
			<form method="post">
				<p><input id="f-name" name="f-name" type="text" placeholder="name" /></p>
				<p><input id="f-email" name="f-email" type="text" placeholder="email" /></p>
				<p><select id="f-how" name="f-how"><option value="">How did you find us?</option><option value="internet">Internet</option></select></p>
				<p><textarea id="f-msg" name="f-msg" placeholder="Enter your message"> </textarea></p>
				<input type="submit" class="edit-submit" value="Fake Send Message" />
			</form>
		</div>
	</div>
</div>

<div class="click panel circle">
	<div class="front">
		<h2>Click or tap this circle!</h2>
	</div>
	<div class="back">
		<h2>Tap Again!</h2>
	</div>
</div>

<div class="block panel">
	<div class="front">
		<a class="action">Configure Block</a>
		<h2 id="list-title">Top Sellers</h2>
		<ol id="list-items">
			<li>Super seller</li>
			<li>Super seller</li>
			<li>Super seller</li>
		</ol>
	</div>
	<div class="back">
		<div class="pad">
			<form action="###" method="post">
				<h3>Edit List</h3>
				<p><input type="text" name="form_title" id="form_title" value="Top Sellers" /></p>
				<p>Display <select name="form_items" id="form_items"><option value="1">1</option><option value="2">2</option><option value="3" selected="selected">3</option><option value="4">4</option><option value="5">5</option></select> items</p>
				<input type="submit" class="edit-submit" value="Save Changes" />
			</form>
		</div>
	</div>
</div>

<div class="click diagonal panel">
	<div class="front">
		<h2><br>
		Click or tap for<br>
		Diagonal Rotation</h2>
		<p class="message">woahdude</p>
	</div>
	<div class="back">
		<div class="pad">
			<h2>like a diamond in the rough</h2>
			<p><small>yes, I'm a little crooked</small></p>
		</div>
	</div>
</div>

<div class="click swing panel">
  <div class="front">
    <h2>Swing like a gate</h2>
  </div>
  <div class="back">
    <div class="pad">
    <h2>Any axis is possible</h2>
    </div>
  </div>
</div>




	<script type="text/javascript">
		//
		//
		//
		//
		//
		//
		// PLEASE, PLEASE, STOP TAKING MY GOOGLE ANALYTICS NUMBER!!!!!!!!!!!!!!!!!!!
		// TAKE ALL THE CODE YOU WANT, JUST NOT MY GA NUMBER!!!!!!!!!!!!!!!!!!!!!!!!
		//
		//
		//
		//
		//
		//
	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-432773-11']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

	</script>
body {
  background-color: #3b5166;
  background-image: -webkit-linear-gradient(left, rgba(255,255,255,.0), rgba(255,255,255,.3)); /* Chrome 10+, Saf5.1+ */
  background-image:         linear-gradient(left, #3b5166, #758493);
  color:#ddd;
  padding:0 2em;
  font-family: helvetica, sans-serif;
  }
h1 {font-size:3em; margin:.5em 0; text-transform:lowercase; text-shadow:1px 1px 1px rgba(0,0,0,0.5); }
h2 {text-shadow:1px 1px 1px rgba(0,0,0,0.3); }
a {color:inherit; }
p {text-shadow:1px 1px 1px rgba(0,0,0,0.3); }
p a {color:#fff; }
p strong,
p b {color:#fff; }
abbr {cursor:help; }

::selection {background: #555; color: #fff; }
::-moz-selection{background: #555; color: #fff; }
::-webkit-selection{background: #555; color: #fff; }

.intro {position: relative; max-width: 720px; }
.intro .info {width: 2em; height: 12px; margin: 0 4px 0 0; padding: 4px 4px 2px 4px; font-weight: 700; color: #333; position: absolute; right: 0; top: 0; z-index: 500; cursor: pointer; }
.intro .info.open {color: #fff; }
.intro .info .about {opacity: 0; width: 400px; padding: 1.5em 1em 0 1em; color: #fff; border: 1px solid rgba(255,255,255,0.6); border-radius: 3px; background: rgba(35,35,35,0.8); -moz-transition: all .2s linear; -webkit-transition: all .2s linear; position: absolute; right: -160px; top: -18px; z-index: 400; }
.intro .info.open .about {opacity: 1; }
.intro .info .close {opacity: 0; display: block; width: auto; padding: 2px 6px; background: rgba(200,200,200,0.4); color: #fff; font-size: smaller; position: absolute; top: -1px; z-index: 700; }
.intro .info.open .close {opacity: 1; }

#other {clear:both; position:fixed; top:4%; right:2%; z-index:1001; text-align: right; }
#other ul li {
  list-style-type:none;
  color: #000;
  text-shadow:1px 1px 1px rgba(255,255,255,0.4);
  opacity: .8;
  -webkit-transition: all .1s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  -ms-transition: all .1s ease-out;
  transition: all .1s ease-out;
  }
#other ul li:hover {opacity: 1; }
#other ul li a {
  display: block;
  width: 100%;
  margin-right: 5px;
  padding: 5px 10px 5px 0;
  background: transparent;
  border: 1px solid transparent;
  border-width: 0 1px 1px 0;
  color:#ddd;
  text-shadow:0 1px 0px rgba(0,0,0,0.4);
  -webkit-transition: all .2s ease-out;
  -moz-transition: all .1s ease-out;
  -o-transition: all .1s ease-out;
  -ms-transition: all .1s ease-out;
  transition: all .1s ease-out;
  }
#other ul li:hover a {background: rgba(0,0,0,0.7); border-color: rgba(255,255,255,.5); -webkit-transform: scale(1.05); text-decoration: none; }
#other .credit {padding-top: 1em; }

.instructions,
.warning {max-width: 800px; padding-right: 146px; }
.warning {color:#fff; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); }
.warning a {color:#fff; text-shadow: 0 1px 0 rgba(0,0,0,0.4); }

code {white-space: nowrap; }
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.