<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; }
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.