<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>仿Google Now卡片翻转动画特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/default.css">
<link href='http://fonts.useso.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="font-awesome-4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<article class="htmleaf-container">
<header class="htmleaf-header">
<h1>仿Google Now卡片翻转动画特效 <span>A Google Now inspired info cards</span></h1>
<div class="htmleaf-links">
<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a>
<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
</div>
</header>
<main>
<p>Google Now inspired info cards.</p>
</main>
<ul>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<p class="card__name"><span>Tony</span><br>Romo</p>
<p class="card__num">9</p>
</div>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="55" stroke="#514d9b" stroke-width="35" />
</svg>
<span>113.2</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<p class="card__name"><span>Aaron</span><br>Rodgers</p>
<p class="card__num">12</p>
</div>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="55" stroke="#35a541" stroke-width="35" />
</svg>
<span>112.2</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<p class="card__name"><span>Ben</span><br>Roethlisberger</p>
<p class="card__num">7</p>
</div>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="55" stroke="#bdb235" stroke-width="35" />
</svg>
<span>103.3</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<p class="card__name"><span>Peyton</span><br>Manning</p>
<p class="card__num">18</p>
</div>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="55" stroke="#db6623" stroke-width="35" />
</svg>
<span>101.5</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<p class="card__name"><span>Tom</span><br>Brady</p>
<p class="card__num">12</p>
</div>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="55" stroke="#3e5eb3" stroke-width="35" />
</svg>
<span>97.4</span>
</div>
</div>
</li>
<li class="card">
<div class="card__flipper">
<div class="card__front">
<p class="card__name"><span>Drew</span><br>Brees</p>
<p class="card__num">9</p>
</div>
<div class="card__back">
<svg height="180" width="180">
<circle cx="90" cy="90" r="55" stroke="#aa9e5c" stroke-width="35" />
</svg>
<span>97.0</span>
</div>
</div>
</li>
</ul>
</article>
<script src='../stopExecutionOnTimeout.js?t=1'></script>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
<script type="text/javascript">
var Flipper = function () {
var card = $('.card');
var flipper = card.find('.card__flipper');
var win = $(window);
var flip = function () {
var thisCard = $(this);
var thisFlipper = thisCard.find('.card__flipper');
var offset = thisCard.offset();
var xc = win.width() / 2;
var yc = win.height() / 2;
var docScroll = $(document).scrollTop();
var cardW = thisCard.outerWidth() / 2;
var cardH = thisCard.height() / 2;
var transX = xc - offset.left - cardW;
var transY = docScroll + yc - offset.top - cardH;
if (win.width() <= 700)
transY = 0;
if (card.hasClass('active'))
unflip();
thisCard.css({ 'z-index': '3' }).addClass('active');
thisFlipper.css({
'transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
'-webkit-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)',
'-ms-transform': 'translate3d(' + transX + 'px,' + transY + 'px, 0) rotateY(180deg) scale(1)'
}).addClass('active');
return false;
};
var unflip = function (e) {
card.css({ 'z-index': '1' }).removeClass('active');
flipper.css({
'transform': 'none',
'-webkit-transform': 'none',
'-ms-transform': 'none'
}).removeClass('active');
};
var bindActions = function () {
card.on('click', flip);
win.on('click', unflip);
};
var init = function () {
bindActions();
};
return { init: init };
}();
Flipper.init();
</script>
</body>
</html>
CSS3+jQuery仿Google Now卡片翻转动画特效源码.zip （20个子文件） 
132677967029870562 CSS3+jQuery_GoogleNow css 
default.css 5KB styles.css 25KB normalize.css 2KB related 
2.jpg 21KB 1.jpg 24KB fonts icomoon.woff 1KB
icomoon.svg 2KB icomoon.eot 2KB icomoon.ttf 1KB font-awesome-4.4.0 css font-awesome.css.map 21KB font-awesome.min.css 26KB font-awesome.css 32KB fonts fontawesome-webfont.eot 67KB fontawesome-webfont.woff 79KB FontAwesome.otf 104KB fontawesome-webfont.svg 348KB fontawesome-webfont.woff2 63KB fontawesome-webfont.ttf 135KB
index.html 6KB js jquery-2.1.1.min.js 82KB资源评论
