Skip to content

Instantly share code, notes, and snippets.

@nickhempsey

nickhempsey/index.html

Created November 2, 2012 18:45
Show Gist options
  • Save nickhempsey/4003479 to your computer and use it in GitHub Desktop.
Save nickhempsey/4003479 to your computer and use it in GitHub Desktop.
Download ZIP
3D Profile Flip Card - From Codepen.io
Raw
index.html
<div id="wrap">
<h1>3D Profile Flip Card</h1>
<p>Click <span aria-hidden="true" data-icon="&#x69;"></span> to rotate the card</p>
<h2>Along the Y</h2>
<div class="card post">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/clooney.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">George Clooney</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>George Clooney</h2>
<p>Actor</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/jolie.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Angelina Jolie</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Angelina Jolie</h2>
<p>Actress</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#"><span aria-hidden="true" data-icon="&#x64;"></span> View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/depp.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Johnny Depp</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Johnny Depp</h2>
<p>Actor</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/wilde.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Olivia Wilde</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Olivia Wilde</h2>
<p>Actress</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<h2>Along the X</h2>
<div class="card post x">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/clooney.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">George Clooney</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>George Clooney</h2>
<p>Actor</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post x">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/jolie.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Angelina Jolie</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Angelina Jolie</h2>
<p>Actress</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#"><span aria-hidden="true" data-icon="&#x64;"></span> View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post x">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/depp.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Johnny Depp</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Johnny Depp</h2>
<p>Actor</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post x">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/wilde.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Olivia Wilde</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Olivia Wilde</h2>
<p>Actress</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<h2>Diagonal</h2>
<div class="card post d">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/clooney.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">George Clooney</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>George Clooney</h2>
<p>Actor</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post d">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/jolie.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Angelina Jolie</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Angelina Jolie</h2>
<p>Actress</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#"><span aria-hidden="true" data-icon="&#x64;"></span> View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post d">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/depp.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Johnny Depp</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Johnny Depp</h2>
<p>Actor</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
<div class="card post d">
<div class="wrap">
<div class="face front">
<img src="http://studio412design.com/flip-card/images/wilde.jpg">
<a aria-hidden="true" data-icon="&#x69;" class="flip"></a>
<span class="name">Olivia Wilde</span>
</div><!-- end .front -->
<div class="face back">
<a aria-hidden="true" data-icon="&#x78;" class="flipback"></a>
<h2>Olivia Wilde</h2>
<p>Actress</p>
<p><span aria-hidden="true" data-icon="&#x63;"></span> 123.456.7890<br>
<a href="mailto:email@thedomain.com"><span aria-hidden="true" data-icon="&#x65;"></span> email@thedomain.com</a></p>
<a class="button" href="#">View Profile</a>
</div><!-- end .back -->
</div><!-- end .wrap -->
</div><!-- end .post -->
</div><!-- end #wrap -->
Raw
script.js
$(".flip").click(function(){
$(this).parents(".wrap").addClass("flipped");});
$(".flipback").click(function(){
$(this).parents(".wrap").removeClass("flipped");});
Raw
style.scss
@import "compass";
$green:#10ff00;
$darkgreen:#127500;
$lightgrey:#d5d5d5;
$darkgrey:#545454;
$blue:#00b1ff;
$darkblue:#00699b;
$red:#df000f;
body {
margin: 0 auto;
padding: 0;
background: $darkgrey;
}
#wrap {
width: 960px;
margin: 0 auto 50px;
overflow: hidden;
}
h1 {
padding: 20px 0;
background: #2d2d2d;
}
h1, h2 {
font-family: "museo-slab", serif;
text-align: center;
margin: 30px 0 5px;
color: white;
text-shadow: 1px 1px 1px rgba(0,0,0,.5);
clear:both;
}
a {
color: #2d2d2d;
text-decoration: none;
&:hover, &:focus {
color: $blue;
}
}
p {
color: white;
text-align: center;
}
.card {
font-family: "museo-slab", serif;
display: block;
width: 200px;
height: 182px;
position: relative;
z-index: 1;
margin: 20px;
float: left;
@include perspective(1000px);
.wrap {
width: 100%;
height: 100%;
position: absolute;
@include transform-style(preserve-3d);
@include transition(transform .4s linear);
@include box-shadow(0 0 8px rgba(0,0,0,.5));
}
.wrap.flipped {
@include transform(rotateY(180deg));
.name, .flip {
background: none;
color: white;
}
}
.face {
position: absolute;
width: 100%;
height: 100%;
@include backface-visibility(hidden);
color: #2d2d2d;
background: white;
@include box-sizing(border-box);
img {
top: 0;
left: 0;
}
a.flip, a.flipback {
display: block;
position: absolute;
@include backface-visibility(hidden);
//background: url(../images/i.png) no-repeat top left;
right: 17px;
top: 5px;
font-size: 20px;
line-height: 20px;
cursor: pointer;
z-index: 2;
color: $green;
//text-indent: -9999px;
}
a.flipback {
color: black;
right: -7px;
top: -6px;
font-size: 24px;
line-height: 24px;
}
.name {
width: 160px;
position: absolute;
@include backface-visibility(hidden);
@include transform(rotateZ(-90deg));
bottom: 78px;
right: -52px;
}
h2 {
margin: 0 0 5px;
padding: 0;
font-size: 18px;
color:#2d2d2d;
text-shadow: none;
text-align: left;
}
p {
padding: 0;
margin: 0 0 10px;
font-size: 14px;
font-family: "museo-sans", sans-serif;
color: #2d2d2d;
text-align: left;
}
a.button {
text-decoration: none;
color: white;
padding: 10px 12px;
font-weight: 500;
background-color: #14e700;
@include filter-gradient(#14e700, #147600, vertical);
@include background-image(linear-gradient(top, #14e700 0%,#147600 100%));
border: 1px solid #149100;
text-align: center;
display: block;
margin: 25px auto 0;
@include border-radius(5px);
@include box-shadow(0 0 5px rgba(0,0,0,.5));
@include transition(transform .3s linear);
&:hover {
@include box-shadow(0 0 15px $green);
}
&:active {
@include filter-gradient(#147600, #14e700, vertical);
@include background-image(linear-gradient(top, #147600 0%, #14e700 100%));
@include box-shadow(0 0 2px $green);
}
}
}
.face.back {
@include transform(rotateY(180deg));
@include backface-visibility(hidden);
padding: 10px;
}
}
.x .wrap.flipped {
@include transform(rotateX(180deg));
}
.x .face.back {
@include transform(rotateX(180deg));
}
.d .wrap.flipped {
@include transform(rotate3d(45, 45, 0, 180deg));
@include box-shadow(none);
}
.d .face.back {
@include transform(rotate3d(45, 45, 0, 180deg));
@include backface-visibility(hidden);
}
@font-face {
font-family: 'icomoon';
src:url('http://studio412design.com/flip-card/fonts/icomoon.eot');
src:url('http://studio412design.com/flip-card/fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('http://studio412design.com/flip-card/fonts/icomoon.svg#icomoon') format('svg'),
url('http://studio412design.com/flip-card/fonts/icomoon.woff') format('woff'),
url('http://studio412design.com/flip-card/fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
font-family: 'icomoon';
content: attr(data-icon);
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
/* Use the following CSS code if you want to have a class per icon */
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment