以下是 jQuery翻转卡片式插件tip cards js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>jQuery��ת��Ƭʽ���tip cards</title>
<link href='css/tip_cards.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.tip_cards.js"></script>
<style>
html {
height: 100%;
}
body {
background: #E5E8ED;
padding: 0;
text-align: center;
font-family: 'Open Sans';
position: relative;
margin: 0;
height: 100%;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
a {
color: black;
}
.header {
padding: 30px 0 0;
float: left;
width: 100%;
background: white;
}
.wrapper {
height: auto !important;
height: 100%;
margin: 0 auto;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2 {
width: 100%;
float: left;
}
h1 {
margin-top: 100px;
color: #999;
margin-bottom: 5px;
font-size: 70px;
font-weight: 100;
}
h2 {
padding: 00px 20px 30px 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
letter-spacing: 0px;
color: #888;
font-size: 20px;
line-height: 160%;
font-weight: 100;
margin-top: 10px;
margin-bottom: 0;
}
.pointer {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
right: -40px;
}
.pointer2 {
color: #00B0FF;
font-family: 'Pacifico';
font-size: 24px;
margin-top: 15px;
position: absolute;
top: 130px;
left: -40px;
}
pre {
margin: 80px auto;
}
pre code {
padding: 35px;
border-radius: 5px;
font-size: 15px;
background: rgba(0,0,0,0.1);
border: rgba(0,0,0,0.05) 5px solid;
max-width: 500px;
}
.main {
float: left;
width: 100%;
margin: 0 auto;
}
.main h1 {
padding:20px 50px 10px;
float: left;
width: 100%;
font-size: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
font-weight: 100;
margin: 0;
padding-top: 25px;
font-family: 'Open Sans';
letter-spacing: -1px;
text-transform: capitalize;
}
.main h1.demo1 {
background: #1ABC9C;
}
.reload.bell {
font-size: 12px;
padding: 20px;
width: 45px;
text-align: center;
height: 47px;
border-radius: 50px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
}
.reload.bell #notification {
font-size: 25px;
line-height: 140%;
}
.reload, .btn{
display: inline-block;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline-block;
line-height: 100%;
padding: 0.7em;
text-decoration: none;
width: 100px;
line-height: 140%;
font-size: 17px;
font-family: Open Sans;
font-weight: bold;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.reload:hover{
background: #317af2;
}
.btn {
width: 200px;
-webkit-box-shadow: none;
box-shadow: none;
background-color: #4D90FE;
background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED);
background-image: linear-gradient(top,#4d90fe,#4787ed);
border: 1px solid #3079ED;
color: #FFF;
}
.clear {
width: auto;
}
.btn:hover, .btn:hover {
background: #317af2;
}
.btns {
width: 410px;
margin: 50px auto;
}
.credit {
text-align: center;
color: #888;
padding: 10px 10px;
margin: 0 0 0 0;
background: #f5f5f5;
float: left;
width: 100%;
}
.credit a {
text-decoration: none;
font-weight: bold;
color: black;
}
.back {
position: absolute;
top: 0;
left: 0;
text-align: center;
display: block;
padding: 7px;
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
background:#f5f5f5;
font-weight: bold;
font-size: 13px;
color: #888;
-webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;
}
.back:hover {
background: #eee;
}
.page-container {
max-width: 1010px;
margin: auto;
position: relative;
}
.page-container p{
font-size: 21px;
font-weight: 100;
line-height: 180%;
}
.page-container h3 {
font-family: "noto serif";
font-size: 23px;
}
.tip {
display: none;
}
.tc_modal {
width: 890px;
}
.tc_body .tc_card .tc_inner_card .tc_click_target {
font-size: 1.25em;
color: #888;
line-height: 25px;
font-weight: 300;
text-align: left;
padding: 30px 30px 30px 30px;
}
.tc_card:nth-child(1n+1) .tc_inner_card {
border-bottom: 3px solid #1345ED;
}
.tc_card:nth-child(2n+2) .tc_inner_card {
border-bottom: 3px solid #03A010;
}
.tc_card:nth-child(3n+3) .tc_inner_card {
border-bottom: 3px solid #F8B00F;
}
.tc_card:nth-child(4n+4) .tc_inner_card {
border-bottom: 3px solid #DD4330;
}
.tc_back p {
font-family: Open Sans, sans-serif;
font-weight: 300;
padding: 50px 20px 20px;
margin: 0 0 10px 0;
color: #8A8C93;
color: #777;
letter-spacing: -1.2px;
font-size: 3.5625em;
line-height: 72px;
text-align: left;
}
.tc_inner_modal .tc_front {
min-height: 300px;
}
.tc_inner_modal .tc_front h1 {
margin-top: 20px;
font-size: 32px;
text-align: left;
margin-bottom: 35px;
}
.tc_inner_modal .tc_front p {
text-align: left;
min-height: 70px;
font-size: 24px;
line-height: 180%;
}
.tc_next, .tc_prev {
line-height: 90%;
}
.tc_inner_modal {
margin: 40px;
}
</style>
<script>
$(document).ready( function() {
$(document).ready( function() {
$(".tips").tip_cards();
});
});
</script>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="header">
<h1>jQuery Tip Cards</h1>
</div>
<div class="page-container">
<ul class="tips">
<li>
<div class="tc_front">
<a href="#tip1">Tip 1: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip1" class="tip">
<div class="tc_front">
<h1>1. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 1: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip2">Tip 2: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip2" class="tip">
<div class="tc_front">
<h1>2. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 2: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip3">Tip 3: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip3" class="tip">
<div class="tc_front">
<h1>3. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 3: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip4">Tip 4: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip4" class="tip">
<div class="tc_front">
<h1>4. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 4: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip5">Tip 5: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip5" class="tip">
<div class="tc_front">
<h1>5. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 5: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip6">Tip 6: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip6" class="tip">
<div class="tc_front">
<h1>6. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 6: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip7">Tip 7: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip7" class="tip">
<div class="tc_front">
<h1>7. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 7: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip8">Tip 8: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip8" class="tip">
<div class="tc_front">
<h1>8. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 8: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip9">Tip 9: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip9" class="tip">
<div class="tc_front">
<h1>9. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 9: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
<li>
<div class="tc_front">
<a href="#tip10">Tip 10: See What videos your friends are posting and adjust friendships accordingly.</a>
</div>
<div class="tc_back"></div>
<div id="tip10" class="tip">
<div class="tc_front">
<h1>10. See What videos your friends are posting</h1>
<p>Whether you're browsing youtube.com or its mobile app, when you're signed in with your Google Account, you can see videos recommended for you.</p>
</div>
<div class="tc_back">
<p>Tip 10: See What videos your friends are posting and adjust friendships accordingly.</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
JS代码(jquery.tip_cards.min.js):
!function(e){
var t={
entrance:"bottom",column:4,margin:"1%",selector:"> li",hoverTilt:"right",triggerSelector:"> li a",cardFlyDirection:"all",closeButton:"X",flipButton:"Flip",navigation:true,beforeOpen:null,afterOpen:null}
;
e.fn.tip_cards=function(n){
function s(){
if(e(".tc_card.active").prev(".tc_card").length<1){
e(".tc_modal_open .tc_prev").addClass("tc_entrance")}
else{
e(".tc_modal_open .tc_prev").removeClass("tc_entrance")}
if(e(".tc_card.active").next(".tc_card").length<1){
e(".tc_modal_open .tc_next").addClass("tc_entrance")}
else{
e(".tc_modal_open .tc_next").removeClass("tc_entrance")}
}
function o(){
var t=100;
e(".tc_fake1").addClass("tc_straighten").css({
position:"absolute",top:(e(window).height()-e(".tc_modal").height())/2+e(window).scrollTop()+16+"px",left:(e(window).width()-e(".tc_modal").width())/2+e(window).scrollLeft()+"px","-webkit-transform":"scale(0.96)","-moz-transform":"scale(0.96)","-o-transform":"scale(0.96)",transform:"scale(0.96)"}
);
setTimeout(function(){
e(".tc_fake2").addClass("tc_straighten").css({
position:"absolute",top:(e(window).height()-e(".tc_modal").height())/2+e(window).scrollTop()+12+"px",left:(e(window).width()-e(".tc_modal").width())/2+e(window).scrollLeft()+"px","-webkit-transform":"scale(0.97)","-moz-transform":"scale(0.97)","-o-transform":"scale(0.97)",transform:"scale(0.97)"}
);
setTimeout(function(){
e(".tc_fake3").addClass("tc_straighten").css({
position:"absolute",top:(e(window).height()-e(".tc_modal").height())/2+e(window).scrollTop()+8+"px",left:(e(window).width()-e(".tc_modal").width())/2+e(window).scrollLeft()+"px","-webkit-transform":"scale(0.98)","-moz-transform":"scale(0.98)","-o-transform":"scale(0.98)",transform:"scale(0.98)"}
);
setTimeout(function(){
e(".tc_fake4").addClass("tc_straighten").css({
position:"absolute",top:(e(window).height()-e(".tc_modal").height())/2+e(window).scrollTop()+4+"px",left:(e(window).width()-e(".tc_modal").width())/2+e(window).scrollLeft()+"px","-webkit-transform":"scale(0.99)","-moz-transform":"scale(0.99)","-o-transform":"scale(0.99)",transform:"scale(0.99)"}
);
setTimeout(function(){
e(".tc_main_modal").css({
position:"absolute",top:(e(window).height()-e(".tc_modal").height())/2+e(window).scrollTop()+"px",left:(e(window).width()-e(".tc_modal").width())/2+e(window).scrollLeft()+"px",bottom:"auto",right:"auto",visibility:"visible"}
);
setTimeout(function(){
e(".tc_main_modal .tc_inner_modal").removeClass("tc_flipped");
if(typeof r.afterOpen=="function")r.afterOpen();
s()}
,500)}
,t)}
,t)}
,t)}
,t)}
var r=e.extend({
}
,t,n),i=e(this);
i.addClass("tc_body");
e.each(i.find(r.selector),function(t){
e(this).addClass("tc_card").hide().css({
width:100/r.column-parseInt(r.margin)*2+"%",margin:r.margin}
).wrapInner("<div class='tc_inner_card tilt_"+r.hoverTilt+"'></div>");
if(e(this).find(".tc_front").length>0){
e(this).find(".tc_inner_card").addClass("tc_flipped")}
}
);
setTimeout(function(){
e.each(i.find(".tc_card"),function(t){
var n=e(this);
n.addClass("animate tc_entrance_"+r.entrance).show();
n.find(".tc_inner_card").prepend("<span class='tc_shadow'></span>");
if(n.find(".tc_front").length>0){
setTimeout(function(){
n.find(".tc_inner_card").removeClass("tc_flipped")}
,600)}
}
)}
,100);
e(window).resize(function(){
o()}
);
i.find(r.triggerSelector).addClass("tc_click_target").click(function(){
function i(n){
if(n.closeButton!=false){
e(".tc_main_modal").prepend("<a class='tc_close' href='#'>"+n.closeButton+"</a>");
e(".tc_main_modal .tc_flip_toggle").remove()}
if(n.flipButton!=false&&e(".tc_main_modal").find(".tc_front").length>0){
e(".tc_main_modal .tc_flip_toggle").remove();
e(".tc_main_modal").prepend("<a class='tc_flip_toggle' href='#'>"+n.flipButton+"</a>")}
e(".tc_overlay,.tc_close").click(function(){
e(".tc_overlay").fadeOut("slow",function(){
e(".tc_overlay").remove()}
);
t.closest(".tc_card").removeClass("active");
e(".tc_next,.tc_prev").addClass("tc_entrance");
e(".tc_next,.tc_prev").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(t){
e(".tc_next,.tc_prev").remove()}
);
e(".tc_modal").attr("style","").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(t){
e(this).remove();
e("body").removeClass("tc_modal_open")}
);
return false}
);
e(".tc_flip_toggle").click(function(){
e(".tc_main_modal .tc_inner_modal").toggleClass("tc_flipped");
return false}
)}
var t=e(this),n=e(t.attr("href"));
t.closest(".tc_card").addClass("active");
if(typeof r.beforeOpen=="function")r.beforeOpen();
e("body").addClass("tc_modal_open");
e("<div class='tc_overlay'></div>").appendTo("body");
e("<div class='tc_modal tc_main_modal'><div class='tc_inner_modal'></div></div>").appendTo("body");
e(".tc_main_modal .tc_inner_modal").html(n.html());
if(e(".tc_main_modal .tc_front").length>0){
e(".tc_main_modal .tc_inner_modal").addClass("tc_flipped")}
if(r.cardFlyDirection=="all"){
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake1 tc_to_top").attr("style","").insertBefore(".tc_main_modal");
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake2 tc_to_bottom").attr("style","").insertBefore(".tc_main_modal");
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake3 tc_to_left").attr("style","").insertBefore(".tc_main_modal");
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake4 tc_to_right").attr("style","").insertBefore(".tc_main_modal")}
else{
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake1 tc_to_"+r.cardFlyDirection).attr("style","").insertBefore(".tc_main_modal");
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake2 tc_to_"+r.cardFlyDirection).attr("style","").insertBefore(".tc_main_modal");
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake3 tc_to_"+r.cardFlyDirection).attr("style","").insertBefore(".tc_main_modal");
e(".tc_main_modal").clone(true).removeClass("tc_main_modal").addClass("tc_fake4 tc_to_"+r.cardFlyDirection).attr("style","").insertBefore(".tc_main_modal")}
i(r);
o();
if(r.navigation!=false){
e("<a class='tc_entrance tc_next' href='#'>»
</a>").insertAfter(".tc_overlay");
e("<a class='tc_entrance tc_prev' href='#'>«
</a>").insertAfter(".tc_overlay")}
s();
e(".tc_next").click(function(){
if(e(".tc_card.active").next(".tc_card").length>0&&!e(this).hasClass("animated")){
var t=e(this);
t.addClass("animated");
var n="<div class='tc_inner_modal'>"+e(e(".tc_card.active").removeClass("active").next(".tc_card").addClass("active").find(".tc_click_target").attr("href")).html()+"</div>";
e(".tc_main_modal").addClass("old").clone().removeClass("old").html(n).insertBefore(".tc_main_modal.old");
i(r);
e(".tc_main_modal.old").addClass("tc_to_bottom force").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(n){
e(".tc_main_modal.old.tc_to_bottom").remove();
e(".tc_main_modal").removeClass("tc_flipped");
t.removeClass("animated");
s()}
)}
return false}
);
e(".tc_prev").click(function(){
if(e(".tc_card.active").prev(".tc_card").length>0&&!e(this).hasClass("animated")){
var t=e(this);
t.addClass("animated");
var n="<div class='tc_inner_modal'>"+e(e(".tc_card.active").removeClass("active").prev(".tc_card").addClass("active").find(".tc_click_target").attr("href")).html()+"</div>";
e(".tc_main_modal").addClass("old").clone().removeClass("old").addClass("tc_to_bottom force").html(n).insertAfter(".tc_main_modal.old");
setTimeout(function(){
e(".tc_main_modal.tc_to_bottom").removeClass("tc_to_bottom force");
e(".tc_main_modal:not(.old)").one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend",function(n){
e(".tc_main_modal.old").remove();
i(r);
e(".tc_main_modal").removeClass("tc_flipped");
s();
t.removeClass("animated")}
)}
,100)}
return false}
)}
)}
}
(window.jQuery)CSS代码(tip_cards.css):
.tc_body{width:100%;float:left;padding:0;}
.tc_card{float:left;list-style:none;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both;}
.tc_inner_card .tc_shadow{background-image:-moz-linear-gradient(right,rgba(0,0,0,0.16) 0%,rgba(0,0,0,0.01) 100%);background-image:-o-linear-gradient(right,rgba(0,0,0,0.16) 0%,rgba(0,0,0,0.01) 100%);background-image:-webkit-linear-gradient(right,rgba(0,0,0,0.16) 0%,rgba(0,0,0,0.01) 100%);background-image:linear,right,rgba(0,0,0,0.16) 0%,rgba(0,0,0,0.01) 100%;content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;-webkit-transition:opacity 0.25s ease;-moz-transition:opacity 0.25s ease;transition:opacity 0.25s ease;}
.tc_inner_card:hover .tc_shadow{opacity:1;}
.tc_modal{max-width:890px;position:fixed;background:white;box-shadow:0px 0px 5px rgba(0,0,0,0.25);-webkit-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-moz-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-o-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);}
.tc_inner_modal{margin:20px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;position:relative;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-webkit-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-moz-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-o-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);}
.tc_overlay{position:fixed;top:0;left:0;height:100%;width:100%;background:rgba(0,0,0,0.5);z-index:99;}
.tc_modal_open{overflow:hidden;}
.tc_main_modal{z-index:105;top:-100%;display:block;visibility:hidden;}
.tc_modal.tc_straighten{-webkit-transform:rotate(0);-moz-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0);}
.tc_to_top{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);top:-200%;z-index:101;-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;}
.tc_to_bottom{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;top:200%;z-index:102;}
.tc_to_bottom.force{top:200% !important;}
.tc_to_left{-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg);-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;left:-200%;z-index:103;}
.tc_to_right{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);-webkit-transform-origin:50% 100%;-moz-transform-origin:50% 100%;-o-transform-origin:50% 100%;transform-origin:50% 100%;left:200%;right:auto;z-index:104;}
body .tc_flipped{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);}
.tc_front,.tc_back{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;backface-visibility:hidden;}
body .tc_front{z-index:2;-webkit-transform:rotateY(0deg);-webkit-transform:translate3d(0,0,0);}
body .tc_back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);background:#FFF;position:absolute;width:100%;height:100%;top:0;left:0;}
/*Chrome Flicker Hack*/
@media screen and (-webkit-min-device-pixel-ratio:0){body .tc_inner_card{transform-style:flat;-webkit-transform-style:flat;-moz-transform-style:flat;-o-transform-style:flat;}
body .tc_flipped{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;}
}
.tc_inner_card{transform-style:preserve-3d;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-webkit-transform:perspective(2200px) translate(0,0);-moz-transform:perspective(2200px) translate(0,0);-ms-transform:perspective(2200px) translate(0,0);-o-transform:perspective(2200px) translate(0,0);background:white;box-shadow:0px 0px 5px rgba(0,0,0,0.25);box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-moz-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-o-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);}
.tc_click_target{padding:10px;display:block;}
.tc_close{z-index:110;position:absolute;right:10px;top:10px;font-size:24px;font-weight:100;line-height:100%;}
.tc_flip_toggle{z-index:110;position:absolute;right:30px;top:10px;font-size:24px;font-weight:100;line-height:100%;}
.tc_inner_card > *{position:relative;}
.tc_entrance.tc_next{right:-100px;opacity:0;}
.tc_entrance.tc_prev{left:-100px;opacity:0;}
.tc_next,.tc_prev{position:fixed;background:white;box-shadow:0px 0px 5px rgba(0,0,0,0.25);color:#333;font-size:44px;line-height:100%;border-radius:50px;display:block;width:48px;padding:10px;height:48px;top:50%;margin-top:-24px;opacity:1;z-index:105;-webkit-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-moz-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-o-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);}
.tc_next{right:-24px;text-indent:-16px;}
.tc_prev{left:-24px;text-indent:16px;}
.tc_card.animate{-webkit-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-moz-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);-o-transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);transition:all 500ms cubic-bezier(0.1,0.1,0.41,0.99);}
.tc_inner_card:hover{-webkit-transform:perspective(2200px) rotateY(25deg);-moz-transform:perspective(2200px) rotateY(25deg);-ms-transform:perspective(2200px) rotateY(25deg);-o-transform:perspective(2200px) rotateY(25deg);transform:perspective(2200px) rotateY(25deg);}
.tc_inner_card.tilt_left:hover{-webkit-transform:perspective(2200px) rotateY(-25deg);-moz-transform:perspective(2200px) rotateY(-25deg);-ms-transform:perspective(2200px) rotateY(-25deg);-o-transform:perspective(2200px) rotateY(-25deg);transform:perspective(2200px) rotateY(-25deg);}
.tc_inner_card.tilt_up:hover{-webkit-transform:perspective(2200px) rotateX(25deg);-moz-transform:perspective(2200px) rotateX(25deg);-ms-transform:perspective(2200px) rotateX(25deg);-o-transform:perspective(2200px) rotateX(25deg);transform:perspective(2200px) rotateX(25deg);}
.tc_inner_card.tilt_down:hover{-webkit-transform:perspective(2200px) rotateX(-25deg);-moz-transform:perspective(2200px) rotateX(-25deg);-ms-transform:perspective(2200px) rotateX(-25deg);-o-transform:perspective(2200px) rotateX(-25deg);transform:perspective(2200px) rotateX(-25deg);}
.tc_entrance_bottom{-webkit-animation-name:tc_entrance_bottom;animation-name:tc_entrance_bottom;}
@-webkit-keyframes tc_entrance_bottom{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px);}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes tc_entrance_bottom{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px);}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
.tc_entrance_top{-webkit-animation-name:tc_entrance_top;animation-name:tc_entrance_top;}
@-webkit-keyframes tc_entrance_top{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px);}
100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0);}
}
@keyframes tc_entrance_top{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px);}
100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
}
.tc_entrance_left{-webkit-animation-name:tc_entrance_left;animation-name:tc_entrance_left;}
@-webkit-keyframes tc_entrance_left{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px);}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
}
@keyframes tc_entrance_left{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px);}
100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
}
.tc_entrance_right{-webkit-animation-name:tc_entrance_right;animation-name:tc_entrance_right;}
@-webkit-keyframes tc_entrance_right{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px);}
100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);}
}
@keyframes tc_entrance_right{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px);}
100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}
}
分享到QQ
分享到微博
微信扫一扫
