Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A Pen by James Duncombe.
<div class="voucher-container">
<div class="flipper">
<div class="front">
<img src="http://www.jcsquash.com/wp-content/themes/jcsquash/images/jcsquash-logo-small-2.png" />
<div>
<h3>Coaching Voucher</h3>
<p>John Smith</p>
</div>
</div>
<div class="back">
<p>Why not buy a JC Squash coaching voucher for a friend or family member?</p>
<p>Email JC for individual lesson prices and include the recipients location and desired venue.</p>
</div>
</div>
</div>
$container = document.querySelector('.voucher-container')
$container.addEventListener 'click', (e) ->
$container.classList.toggle('flipped')
@import "compass";
@mixin backface-visibility($backface-visibility) {
-webkit-backface-visibility: $backface-visibility;
-moz-backface-visibility: $backface-visibility;
backface-visibility: $backface-visibility;
}
@mixin transform($transform) {
-webkit-transform: $transform;
-moz-transform: $transform;
-ms-transform: $transform;
-o-transform: $transform;
transform: $transform;
}
@mixin border-radius($border-radius) {
-webkit-border-radius: $border-radius;
-moz-border-radius: $border-radius;
-ms-border-radius: $border-radius;
-o-border-radius: $border-radius;
border-radius: $border-radius;
}
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin transform-style($transform-style) {
-webkit-transform-style: $transform-style;
-moz-transform-style: $transform-style;
transform-style: $transform-style;
}
@mixin perspective($perspective) {
-webkit-perspective: $perspective;
-moz-perspective: $perspective;
perspective: $perspective;
}
@mixin box-shadow($box-shadow) {
-webkit-box-shadow: $box-shadow;
-moz-box-shadow: $box-shadow;
-o-box-shadow: $box-shadow;
box-shadow: $box-shadow;
}
@mixin user-select($user-select) {
-webkit-user-select: $user-select;
-moz-user-select: $user-select;
user-select: $user-select;
}
.voucher-container {
@include user-select(none);
color: #fff;
font-family: 'League Gothic';
font-weight: 400;
font-size: 14px;
}
.voucher-container {
display: inline-block;
@include transform-style(preserve-3d);
@include perspective(600px);
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
.front {
background-size: 60%;
letter-spacing: 1px;
& > div {
margin-top: 21px;
float: right;
width: 70%;
}
img {
margin-top: 13px;
float: left;
width: 65px;
margin-left: 5px;
}
h3 {
line-height: 1.2;
margin: 0;
font-weight: 400;
font-size: 32px;
text-transform: uppercase;
}
p {
font-size: 24px;
position: absolute;
bottom: 0;
right: 20px;
}
}
.back {
font-family: Arial;
@include transform(rotateY(180deg));
p {
font-size: 16px;
line-height: 1.5;
margin-bottom: 21px;
margin-top: 7px;
}
p:last-child {
color: #A8A8A8;
font-size: 14px;
}
}
.flipper, .front, .back {
@include perspective(600px);
padding: 10px 15px;
height: 150px;
width: 300px;
}
.front, .back {
background: #070002 url(https://dl.dropboxusercontent.com/u/4576039/jezza/silhouette.png) no-repeat 105% 10px;
background-size: 60%;
background-color: #070002;
cursor: pointer;
position: absolute;
@include box-shadow(0 2px 10px rgba(0,0,0,0.3));
@include border-radius(7px);
@include transition(all 1s);
@include backface-visibility(hidden);
}
&.flipped .back {
@include transform(rotateY(0deg));
}
&.flipped .front {
@include transform(rotateY(-180deg));
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment