Responsive Flip Pricing Table to view month or year price.
A Pen by Shane Heyns on CodePen.
<div class="pricing-container"> | |
<div class="pricing-switcher"> | |
<p class="fieldset"> | |
<input type="radio" name="duration-1" value="monthly" id="monthly-1" checked> | |
<label for="monthly-1">Monthly</label> | |
<input type="radio" name="duration-1" value="yearly" id="yearly-1"> | |
<label for="yearly-1">Yearly</label> | |
<span class="switch"></span> | |
</p> | |
</div> | |
<ul class="pricing-list bounce-invert"> | |
<li> | |
<ul class="pricing-wrapper"> | |
<li data-type="monthly" class="is-visible"> | |
<header class="pricing-header"> | |
<h2>Basic</h2> | |
<div class="price"> | |
<span class="currency">$</span> | |
<span class="value">30</span> | |
<span class="duration">mo</span> | |
</div> | |
</header> | |
<div class="pricing-body"> | |
<ul class="pricing-features"> | |
<li><em>5</em> Email Accounts</li> | |
<li><em>1</em> Template Style</li> | |
<li><em>25</em> Products Loaded</li> | |
<li><em>1</em> Image per Product</li> | |
<li><em>Unlimited</em> Bandwidth</li> | |
<li><em>24/7</em> Support</li> | |
</ul> | |
</div> | |
<footer class="pricing-footer"> | |
<a class="select" href="#">Sign Up</a> | |
</footer> | |
</li> | |
<li data-type="yearly" class="is-hidden"> | |
<header class="pricing-header"> | |
<h2>Basic</h2> | |
<div class="price"> | |
<span class="currency">$</span> | |
<span class="value">320</span> | |
<span class="duration">yr</span> | |
</div> | |
</header> | |
<div class="pricing-body"> | |
<ul class="pricing-features"> | |
<li><em>5</em> Email Accounts</li> | |
<li><em>1</em> Template Style</li> | |
<li><em>25</em> Products Loaded</li> | |
<li><em>1</em> Image per Product</li> | |
<li><em>Unlimited</em> Bandwidth</li> | |
<li><em>24/7</em> Support</li> | |
</ul> | |
</div> | |
<footer class="pricing-footer"> | |
<a class="select" href="#">Sign Up</a> | |
</footer> | |
</li> | |
</ul> | |
</li> | |
<li class="exclusive"> | |
<ul class="pricing-wrapper"> | |
<li data-type="monthly" class="is-visible"> | |
<header class="pricing-header"> | |
<h2>Exclusive</h2> | |
<div class="price"> | |
<span class="currency">$</span> | |
<span class="value">60</span> | |
<span class="duration">mo</span> | |
</div> | |
</header> | |
<div class="pricing-body"> | |
<ul class="pricing-features"> | |
<li><em>15</em> Email Accounts</li> | |
<li><em>3</em> Template Styles</li> | |
<li><em>40</em> Products Loaded</li> | |
<li><em>7</em> Images per Product</li> | |
<li><em>Unlimited</em> Bandwidth</li> | |
<li><em>24/7</em> Support</li> | |
</ul> | |
</div> | |
<footer class="pricing-footer"> | |
<a class="select" href="#">Sign Up</a> | |
</footer> | |
</li> | |
<li data-type="yearly" class="is-hidden"> | |
<header class="pricing-header"> | |
<h2>Exclusive</h2> | |
<div class="price"> | |
<span class="currency">$</span> | |
<span class="value">630</span> | |
<span class="duration">yr</span> | |
</div> | |
</header> | |
<div class="pricing-body"> | |
<ul class="pricing-features"> | |
<li><em>15</em> Email Accounts</li> | |
<li><em>3</em> Template Styles</li> | |
<li><em>40</em> Products Loaded</li> | |
<li><em>7</em> Images per Product</li> | |
<li><em>Unlimited</em> Bandwidth</li> | |
<li><em>24/7</em> Support</li> | |
</ul> | |
</div> | |
<footer class="pricing-footer"> | |
<a class="select" href="#">Sign Up</a> | |
</footer> | |
</li> | |
</ul> | |
</li> | |
<li> | |
<ul class="pricing-wrapper"> | |
<li data-type="monthly" class="is-visible"> | |
<header class="pricing-header"> | |
<h2>Pro</h2> | |
<div class="price"> | |
<span class="currency">$</span> | |
<span class="value">90</span> | |
<span class="duration">mo</span> | |
</div> | |
</header> | |
<div class="pricing-body"> | |
<ul class="pricing-features"> | |
<li><em>20</em> Email Accounts</li> | |
<li><em>5</em> Template Styles</li> | |
<li><em>50</em> Products Loaded</li> | |
<li><em>10</em> Images per Product</li> | |
<li><em>Unlimited</em> Bandwidth</li> | |
<li><em>24/7</em> Support</li> | |
</ul> | |
</div> | |
<footer class="pricing-footer"> | |
<a class="select" href="#">Sign Up</a> | |
</footer> | |
</li> | |
<li data-type="yearly" class="is-hidden"> | |
<header class="pricing-header"> | |
<h2>Pro</h2> | |
<div class="price"> | |
<span class="currency">$</span> | |
<span class="value">950</span> | |
<span class="duration">yr</span> | |
</div> | |
</header> | |
<div class="pricing-body"> | |
<ul class="pricing-features"> | |
<li><em>20</em> Email Accounts</li> | |
<li><em>5</em> Template Styles</li> | |
<li><em>50</em> Products Loaded</li> | |
<li><em>10</em> Images per Product</li> | |
<li><em>Unlimited</em> Bandwidth</li> | |
<li><em>24/7</em> Support</li> | |
</ul> | |
</div> | |
<footer class="pricing-footer"> | |
<a class="select" href="#">Sign Up</a> | |
</footer> | |
</li> | |
</ul> | |
</li> | |
</ul> | |
</div> |
Responsive Flip Pricing Table to view month or year price.
A Pen by Shane Heyns on CodePen.
jQuery(document).ready(function($){ | |
//hide the subtle gradient layer (.pricing-list > li::after) when pricing table has been scrolled to the end (mobile version only) | |
checkScrolling($('.pricing-body')); | |
$(window).on('resize', function(){ | |
window.requestAnimationFrame(function(){checkScrolling($('.pricing-body'))}); | |
}); | |
$('.pricing-body').on('scroll', function(){ | |
var selected = $(this); | |
window.requestAnimationFrame(function(){checkScrolling(selected)}); | |
}); | |
function checkScrolling(tables){ | |
tables.each(function(){ | |
var table= $(this), | |
totalTableWidth = parseInt(table.children('.pricing-features').width()), | |
tableViewport = parseInt(table.width()); | |
if( table.scrollLeft() >= totalTableWidth - tableViewport -1 ) { | |
table.parent('li').addClass('is-ended'); | |
} else { | |
table.parent('li').removeClass('is-ended'); | |
} | |
}); | |
} | |
//switch from monthly to annual pricing tables | |
bouncy_filter($('.pricing-container')); | |
function bouncy_filter(container) { | |
container.each(function(){ | |
var pricing_table = $(this); | |
var filter_list_container = pricing_table.children('.pricing-switcher'), | |
filter_radios = filter_list_container.find('input[type="radio"]'), | |
pricing_table_wrapper = pricing_table.find('.pricing-wrapper'); | |
//store pricing table items | |
var table_elements = {}; | |
filter_radios.each(function(){ | |
var filter_type = $(this).val(); | |
table_elements[filter_type] = pricing_table_wrapper.find('li[data-type="'+filter_type+'"]'); | |
}); | |
//detect input change event | |
filter_radios.on('change', function(event){ | |
event.preventDefault(); | |
//detect which radio input item was checked | |
var selected_filter = $(event.target).val(); | |
//give higher z-index to the pricing table items selected by the radio input | |
show_selected_items(table_elements[selected_filter]); | |
//rotate each pricing-wrapper | |
//at the end of the animation hide the not-selected pricing tables and rotate back the .pricing-wrapper | |
if( !Modernizr.cssanimations ) { | |
hide_not_selected_items(table_elements, selected_filter); | |
pricing_table_wrapper.removeClass('is-switched'); | |
} else { | |
pricing_table_wrapper.addClass('is-switched').eq(0).one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function() { | |
hide_not_selected_items(table_elements, selected_filter); | |
pricing_table_wrapper.removeClass('is-switched'); | |
//change rotation direction if .pricing-list has the .bounce-invert class | |
if(pricing_table.find('.pricing-list').hasClass('bounce-invert')) pricing_table_wrapper.toggleClass('reverse-animation'); | |
}); | |
} | |
}); | |
}); | |
} | |
function show_selected_items(selected_elements) { | |
selected_elements.addClass('is-selected'); | |
} | |
function hide_not_selected_items(table_containers, filter) { | |
$.each(table_containers, function(key, value){ | |
if ( key != filter ) { | |
$(this).removeClass('is-visible is-selected').addClass('is-hidden'); | |
} else { | |
$(this).addClass('is-visible').removeClass('is-hidden is-selected'); | |
} | |
}); | |
} | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
html, body, div, span, applet, object, iframe, | |
h1, h2, h3, h4, h5, h6, p, blockquote, pre, | |
a, abbr, acronym, address, big, cite, code, | |
del, dfn, em, img, ins, kbd, q, s, samp, | |
small, strike, strong, sub, sup, tt, var, | |
b, u, i, center, | |
dl, dt, dd, ol, ul, li, | |
fieldset, form, label, legend, | |
table, caption, tbody, tfoot, thead, tr, th, td, | |
article, aside, canvas, details, embed, | |
figure, figcaption, footer, header, hgroup, | |
menu, nav, output, ruby, section, summary, | |
time, mark, audio, video { | |
margin: 0; | |
padding: 0; | |
border: 0; | |
font-size: 100%; | |
font: inherit; | |
vertical-align: baseline; | |
} | |
/* HTML5 display-role reset for older browsers */ | |
article, aside, details, figcaption, figure, | |
footer, header, hgroup, menu, nav, section, main { | |
display: block; | |
} | |
body { | |
line-height: 1; | |
} | |
ol, ul { | |
list-style: none; | |
} | |
blockquote, q { | |
quotes: none; | |
} | |
blockquote:before, blockquote:after, | |
q:before, q:after { | |
content: ''; | |
content: none; | |
} | |
table { | |
border-collapse: collapse; | |
border-spacing: 0; | |
} | |
*, | |
*::after, | |
*::before { | |
-webkit-box-sizing: border-box; | |
-moz-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
html { | |
font-size: 62.5%; | |
} | |
html * { | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
body { | |
font-size: 1.6rem; | |
font-family: "Open Sans", sans-serif; | |
color: #2d3d4f; | |
background-color: #1bbc9d; | |
} | |
a { | |
text-decoration: none; | |
} | |
.pricing-container { | |
width: 90%; | |
max-width: 1170px; | |
margin: 4em auto; | |
} | |
.pricing-container { | |
margin: 6em auto; | |
} | |
.pricing-container.full-width { | |
width: 100%; | |
max-width: none; | |
} | |
.pricing-switcher { | |
text-align: center; | |
} | |
.pricing-switcher .fieldset { | |
display: inline-block; | |
position: relative; | |
padding: 2px; | |
border-radius: 50em; | |
border: 2px solid #2d3e50; | |
} | |
.pricing-switcher input[type="radio"] { | |
position: absolute; | |
opacity: 0; | |
} | |
.pricing-switcher label { | |
position: relative; | |
z-index: 1; | |
display: inline-block; | |
float: left; | |
width: 90px; | |
height: 40px; | |
line-height: 40px; | |
cursor: pointer; | |
font-size: 1.4rem; | |
color: #ffffff; | |
} | |
.pricing-switcher .switch { | |
position: absolute; | |
top: 2px; | |
left: 2px; | |
height: 40px; | |
width: 90px; | |
background-color: #2d3e50; | |
border-radius: 50em; | |
-webkit-transition: -webkit-transform 0.5s; | |
-moz-transition: -moz-transform 0.5s; | |
transition: transform 0.5s; | |
} | |
.pricing-switcher input[type="radio"]:checked + label + .switch, | |
.pricing-switcher input[type="radio"]:checked + label:nth-of-type(n) + .switch { | |
-webkit-transform: translateX(90px); | |
-moz-transform: translateX(90px); | |
-ms-transform: translateX(90px); | |
-o-transform: translateX(90px); | |
transform: translateX(90px); | |
} | |
.no-js .pricing-switcher { | |
display: none; | |
} | |
.pricing-list { | |
margin: 2em 0 0; | |
} | |
.pricing-list > li { | |
position: relative; | |
margin-bottom: 1em; | |
} | |
@media only screen and (min-width: 768px) { | |
.pricing-list { | |
margin: 3em 0 0; | |
} | |
.pricing-list:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.pricing-list > li { | |
width: 33.3333333333%; | |
float: left; | |
padding-left: 5px; | |
padding-right: 5px; | |
} | |
.has-margins .pricing-list > li { | |
width: 32.3333333333%; | |
float: left; | |
margin-right: 1.5%; | |
} | |
.has-margins .pricing-list > li:last-of-type { | |
margin-right: 0; | |
} | |
} | |
.pricing-wrapper { | |
position: relative; | |
} | |
.touch .pricing-wrapper { | |
-webkit-perspective: 2000px; | |
-moz-perspective: 2000px; | |
perspective: 2000px; | |
} | |
.pricing-wrapper.is-switched .is-visible { | |
-webkit-transform: rotateY(180deg); | |
-moz-transform: rotateY(180deg); | |
-ms-transform: rotateY(180deg); | |
-o-transform: rotateY(180deg); | |
transform: rotateY(180deg); | |
-webkit-animation: rotate 0.5s; | |
-moz-animation: rotate 0.5s; | |
animation: rotate 0.5s; | |
} | |
.pricing-wrapper.is-switched .is-hidden { | |
-webkit-transform: rotateY(0); | |
-moz-transform: rotateY(0); | |
-ms-transform: rotateY(0); | |
-o-transform: rotateY(0); | |
transform: rotateY(0); | |
-webkit-animation: rotate-inverse 0.5s; | |
-moz-animation: rotate-inverse 0.5s; | |
animation: rotate-inverse 0.5s; | |
opacity: 0; | |
} | |
.pricing-wrapper.is-switched .is-selected { | |
opacity: 1; | |
} | |
.pricing-wrapper.is-switched.reverse-animation .is-visible { | |
-webkit-transform: rotateY(-180deg); | |
-moz-transform: rotateY(-180deg); | |
-ms-transform: rotateY(-180deg); | |
-o-transform: rotateY(-180deg); | |
transform: rotateY(-180deg); | |
-webkit-animation: rotate-back 0.5s; | |
-moz-animation: rotate-back 0.5s; | |
animation: rotate-back 0.5s; | |
} | |
.pricing-wrapper.is-switched.reverse-animation .is-hidden { | |
-webkit-transform: rotateY(0); | |
-moz-transform: rotateY(0); | |
-ms-transform: rotateY(0); | |
-o-transform: rotateY(0); | |
transform: rotateY(0); | |
-webkit-animation: rotate-inverse-back 0.5s; | |
-moz-animation: rotate-inverse-back 0.5s; | |
animation: rotate-inverse-back 0.5s; | |
opacity: 0; | |
} | |
.pricing-wrapper.is-switched.reverse-animation .is-selected { | |
opacity: 1; | |
} | |
.pricing-wrapper > li { | |
background-color: #ffffff; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
outline: 1px solid transparent; | |
} | |
.pricing-wrapper > li::after { | |
content: ''; | |
position: absolute; | |
top: 0; | |
right: 0; | |
height: 100%; | |
width: 50px; | |
pointer-events: none; | |
background: -webkit-linear-gradient( right , #ffffff, rgba(255, 255, 255, 0)); | |
background: linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)); | |
} | |
.pricing-wrapper > li.is-ended::after { | |
display: none; | |
} | |
.pricing-wrapper .is-visible { | |
position: relative; | |
z-index: 5; | |
} | |
.pricing-wrapper .is-hidden { | |
position: absolute; | |
top: 0; | |
left: 0; | |
height: 100%; | |
width: 100%; | |
z-index: 1; | |
-webkit-transform: rotateY(180deg); | |
-moz-transform: rotateY(180deg); | |
-ms-transform: rotateY(180deg); | |
-o-transform: rotateY(180deg); | |
transform: rotateY(180deg); | |
} | |
.pricing-wrapper .is-selected { | |
z-index: 3 !important; | |
} | |
@media only screen and (min-width: 768px) { | |
.pricing-wrapper > li::before { | |
content: ''; | |
position: absolute; | |
z-index: 6; | |
left: -1px; | |
top: 50%; | |
bottom: auto; | |
-webkit-transform: translateY(-50%); | |
-moz-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
-o-transform: translateY(-50%); | |
transform: translateY(-50%); | |
height: 50%; | |
width: 1px; | |
background-color: #b1d6e8; | |
} | |
.pricing-wrapper > li::after { | |
display: none; | |
} | |
.exclusive .pricing-wrapper > li { | |
box-shadow: inset 0 0 0 3px #2d3e50; | |
} | |
.has-margins .pricing-wrapper > li, | |
.has-margins .exclusive .pricing-wrapper > li { | |
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1); | |
} | |
:nth-of-type(1) > .pricing-wrapper > li::before { | |
display: none; | |
} | |
.has-margins .pricing-wrapper > li { | |
border-radius: 4px 4px 6px 6px; | |
} | |
.has-margins .pricing-wrapper > li::before { | |
display: none; | |
} | |
} | |
@media only screen and (min-width: 1500px) { | |
.full-width .pricing-wrapper > li { | |
padding: 2.5em 0; | |
} | |
} | |
.no-js .pricing-wrapper .is-hidden { | |
position: relative; | |
-webkit-transform: rotateY(0); | |
-moz-transform: rotateY(0); | |
-ms-transform: rotateY(0); | |
-o-transform: rotateY(0); | |
transform: rotateY(0); | |
margin-top: 1em; | |
} | |
@media only screen and (min-width: 768px) { | |
.exclusive .pricing-wrapper > li::before { | |
display: none; | |
} | |
.exclusive + li .pricing-wrapper > li::before { | |
display: none; | |
} | |
} | |
.pricing-header h2 { | |
padding: 0.9em 0.9em 0.6em; | |
font-weight: 400; | |
margin-bottom: 30px; | |
margin-top: 10px; | |
text-transform: uppercase; | |
text-align: center; | |
} | |
.pricing-header { | |
height: auto; | |
padding: 1.9em 0 1.6em; | |
pointer-events: auto; | |
text-align: center; | |
color: #173d50; | |
background-color: transparent; | |
} | |
.exclusive .pricing-header { | |
color: #1bbc9d; | |
background-color: transparent; | |
} | |
.pricing-header h2 { | |
font-size: 2.8rem; | |
letter-spacing: 2px; | |
} | |
.currency, | |
.value { | |
font-size: 3rem; | |
font-weight: 300; | |
} | |
.duration { | |
font-weight: 700; | |
font-size: 1.3rem; | |
color: #8dc8e4; | |
text-transform: uppercase; | |
} | |
.exclusive .duration { | |
color: #f3b6ab; | |
} | |
.duration::before { | |
content: '/'; | |
margin-right: 2px; | |
} | |
.value { | |
font-size: 7rem; | |
font-weight: 300; | |
} | |
.currency, | |
.duration { | |
color: #1bbc9d; | |
} | |
.exclusive .currency, | |
.exclusive .duration { | |
color: #2d3e50; | |
} | |
.currency { | |
display: inline-block; | |
margin-top: 10px; | |
vertical-align: top; | |
font-size: 2rem; | |
font-weight: 700; | |
} | |
.duration { | |
font-size: 1.4rem; | |
} | |
.pricing-body { | |
overflow-x: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
.is-switched .pricing-body { | |
overflow: hidden; | |
} | |
.pricing-body { | |
overflow-x: visible; | |
} | |
.pricing-features { | |
width: 600px; | |
} | |
.pricing-features:after { | |
content: ""; | |
display: table; | |
clear: both; | |
} | |
.pricing-features li { | |
width: 100px; | |
float: left; | |
padding: 1.6em 1em; | |
font-size: 1.5rem; | |
text-align: center; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.pricing-features em { | |
display: block; | |
margin-bottom: 5px; | |
font-weight: 600; | |
} | |
.pricing-features { | |
width: auto; | |
} | |
.pricing-features li { | |
float: none; | |
width: auto; | |
padding: 1em; | |
} | |
.exclusive .pricing-features li { | |
margin: 0 3px; | |
} | |
.pricing-features em { | |
display: inline-block; | |
margin-bottom: 0; | |
} | |
.has-margins .exclusive .pricing-features li { | |
margin: 0; | |
} | |
.pricing-footer { | |
position: absolute; | |
z-index: 1; | |
top: 0; | |
left: 0; | |
height: 80px; | |
width: 100%; | |
} | |
.pricing-footer { | |
position: relative; | |
height: auto; | |
padding: 1.8em 0; | |
text-align: center; | |
} | |
.pricing-footer::after { | |
display: none; | |
} | |
.has-margins .pricing-footer { | |
padding-bottom: 0; | |
} | |
.select { | |
position: relative; | |
z-index: 1; | |
display: block; | |
height: 100%; | |
overflow: hidden; | |
text-indent: 100%; | |
white-space: nowrap; | |
color: transparent; | |
} | |
.select { | |
position: static; | |
display: inline-block; | |
height: auto; | |
padding: 1.3em 2em; | |
color: #1bbc9d; | |
border-radius: 8px; | |
border: 2px solid #1bbc9d; | |
font-size: 1.4rem; | |
text-indent: 0; | |
text-transform: uppercase; | |
letter-spacing: 2px; | |
transition: all .6s; | |
width: 70%; | |
} | |
.no-touch .select:hover { | |
background-color: #1bbc9d; | |
color: #ffffff; | |
} | |
.exclusive .select { | |
background-color: #1bbc9d; | |
color: #ffffff; | |
} | |
.no-touch .exclusive .select:hover { | |
background-color: #24e0ba; | |
} | |
.secondary-theme .exclusive .select { | |
background-color: #1bbc9d; | |
} | |
.no-touch .secondary-theme .exclusive .select:hover { | |
background-color: #112e3c; | |
} | |
.has-margins .select { | |
display: block; | |
padding: 1.7em 0; | |
border-radius: 0 0 4px 4px; | |
} | |
@-webkit-keyframes rotate { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(200deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(180deg); | |
} | |
} | |
@-moz-keyframes rotate { | |
0% { | |
-moz-transform: perspective(2000px) rotateY(0); | |
} | |
70% { | |
-moz-transform: perspective(2000px) rotateY(200deg); | |
} | |
100% { | |
-moz-transform: perspective(2000px) rotateY(180deg); | |
} | |
} | |
@keyframes rotate { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
-moz-transform: perspective(2000px) rotateY(0); | |
-ms-transform: perspective(2000px) rotateY(0); | |
-o-transform: perspective(2000px) rotateY(0); | |
transform: perspective(2000px) rotateY(0); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(200deg); | |
-moz-transform: perspective(2000px) rotateY(200deg); | |
-ms-transform: perspective(2000px) rotateY(200deg); | |
-o-transform: perspective(2000px) rotateY(200deg); | |
transform: perspective(2000px) rotateY(200deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(180deg); | |
-moz-transform: perspective(2000px) rotateY(180deg); | |
-ms-transform: perspective(2000px) rotateY(180deg); | |
-o-transform: perspective(2000px) rotateY(180deg); | |
transform: perspective(2000px) rotateY(180deg); | |
} | |
} | |
@-webkit-keyframes rotate-inverse { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(-180deg); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(20deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
} | |
} | |
@-moz-keyframes rotate-inverse { | |
0% { | |
-moz-transform: perspective(2000px) rotateY(-180deg); | |
} | |
70% { | |
-moz-transform: perspective(2000px) rotateY(20deg); | |
} | |
100% { | |
-moz-transform: perspective(2000px) rotateY(0); | |
} | |
} | |
@keyframes rotate-inverse { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(-180deg); | |
-moz-transform: perspective(2000px) rotateY(-180deg); | |
-ms-transform: perspective(2000px) rotateY(-180deg); | |
-o-transform: perspective(2000px) rotateY(-180deg); | |
transform: perspective(2000px) rotateY(-180deg); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(20deg); | |
-moz-transform: perspective(2000px) rotateY(20deg); | |
-ms-transform: perspective(2000px) rotateY(20deg); | |
-o-transform: perspective(2000px) rotateY(20deg); | |
transform: perspective(2000px) rotateY(20deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
-moz-transform: perspective(2000px) rotateY(0); | |
-ms-transform: perspective(2000px) rotateY(0); | |
-o-transform: perspective(2000px) rotateY(0); | |
transform: perspective(2000px) rotateY(0); | |
} | |
} | |
@-webkit-keyframes rotate-back { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(-200deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(-180deg); | |
} | |
} | |
@-moz-keyframes rotate-back { | |
0% { | |
-moz-transform: perspective(2000px) rotateY(0); | |
} | |
70% { | |
-moz-transform: perspective(2000px) rotateY(-200deg); | |
} | |
100% { | |
-moz-transform: perspective(2000px) rotateY(-180deg); | |
} | |
} | |
@keyframes rotate-back { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
-moz-transform: perspective(2000px) rotateY(0); | |
-ms-transform: perspective(2000px) rotateY(0); | |
-o-transform: perspective(2000px) rotateY(0); | |
transform: perspective(2000px) rotateY(0); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(-200deg); | |
-moz-transform: perspective(2000px) rotateY(-200deg); | |
-ms-transform: perspective(2000px) rotateY(-200deg); | |
-o-transform: perspective(2000px) rotateY(-200deg); | |
transform: perspective(2000px) rotateY(-200deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(-180deg); | |
-moz-transform: perspective(2000px) rotateY(-180deg); | |
-ms-transform: perspective(2000px) rotateY(-180deg); | |
-o-transform: perspective(2000px) rotateY(-180deg); | |
transform: perspective(2000px) rotateY(-180deg); | |
} | |
} | |
@-webkit-keyframes rotate-inverse-back { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(180deg); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(-20deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
} | |
} | |
@-moz-keyframes rotate-inverse-back { | |
0% { | |
-moz-transform: perspective(2000px) rotateY(180deg); | |
} | |
70% { | |
-moz-transform: perspective(2000px) rotateY(-20deg); | |
} | |
100% { | |
-moz-transform: perspective(2000px) rotateY(0); | |
} | |
} | |
@keyframes rotate-inverse-back { | |
0% { | |
-webkit-transform: perspective(2000px) rotateY(180deg); | |
-moz-transform: perspective(2000px) rotateY(180deg); | |
-ms-transform: perspective(2000px) rotateY(180deg); | |
-o-transform: perspective(2000px) rotateY(180deg); | |
transform: perspective(2000px) rotateY(180deg); | |
} | |
70% { | |
-webkit-transform: perspective(2000px) rotateY(-20deg); | |
-moz-transform: perspective(2000px) rotateY(-20deg); | |
-ms-transform: perspective(2000px) rotateY(-20deg); | |
-o-transform: perspective(2000px) rotateY(-20deg); | |
transform: perspective(2000px) rotateY(-20deg); | |
} | |
100% { | |
-webkit-transform: perspective(2000px) rotateY(0); | |
-moz-transform: perspective(2000px) rotateY(0); | |
-ms-transform: perspective(2000px) rotateY(0); | |
-o-transform: perspective(2000px) rotateY(0); | |
transform: perspective(2000px) rotateY(0); | |
} | |
} |