当青训营遇上码上掘金
作品结合了css3d实现自我介绍卡片的翻转、transition过渡动画实现选项栏切换，创作灵感源于平时积累的素材，有些地方代码不是很简洁，有错误的地方欢迎指正。
作品页面实现效果如下：
主页面：
3d效果翻转卡片：
由于效果只能放置图片，大家可以点击以下链接查看具体作品 h5.qzone.qq.com/page/photo?…
这期我们先来解析html页面布局结构和js部分代码，css部分的代码我们留到下期讲解。
让我们先看看html部分：
<div class="p p2">
</div>
<div class="p p3">
</div>
<div class="card show">
<div class="card-container">
<div class="cover">
大家好！我叫小麦，一名热爱前端的菜鸟，进入本次青训营是抱着学习的心态来学习的，希望在青训营这个大家庭能和优秀的人一起学习、进步。
翻面有惊喜！
</div>
<div class="back">
缘分让我们相遇，大家新年快乐呀！
</div>
</div>
</div>
<div class="card ">
<div class="card-container">
<div class="cover">
喜欢篮球、吉他、唱歌、桌球，是一个热爱生活的普通大学生
</div>
<div class="back">
很高兴认识大家！
</div>
</div>
</div>
<div class="card ">
<div class="card-container">
<div class="cover">
emm，母胎单身，以后从事这项工作不知道还有没有机会认识异性，hhh
</div>
<div class="back">
欢迎来和我交流呀！兴趣爱好、IT知识都可以噢，一起进步丫
</div>
</div>
</div>
</div>
</div>
大致布局思路：
布局主要分为三大块，背景图、右侧标签切换和中间卡片部分。
container类的div标签用于布局背景图，设为relative定位，标签切换和卡片利用绝对定位布局。
（详细布局方法可关注下期）
jq实现标签切换效果：
$('.nav li').on('click', function () {
$(this).addClass('on').siblings().removeClass('on');
$('.card').eq($(this).index()).addClass('show').siblings().removeClass('show');
})
先给nav中的每个li标签绑定点击事件，点击某个标签，就会给点击的标签单独加上on类名（用于高亮显示标签的样式），其他兄弟标签移除on类，这样就能做到单独高亮显示点击的标签。
卡片部分也是利用这个原理，不同的是用了eq()和index()这两个jq方法，利用index和eq方法可以找到点击的标签对应的是html第几个card，例如点击的是第1个li标签就会对应第1个card，就能做到单独显示某个卡片啦。
今天作品分享就到此结束了，咱们下期再见！
