引文
当青训营遇上码上掘金。这一次的码上掘金活动，我写的是“我的名片”。制作了一张可以翻页的名片，另外，使用了阿里的矢量图点缀。
灵感&思路：
在翻看书籍时灵光乍现，当时就思考能否将一张名片如同翻看纸张一样，实现翻页的效果，思考过后发现可行。然后以下是实现的具体的操作:
首先，分为左右两部分，分别以div承载对应的内容，这里我是以一半是图片的效果一半是文字介绍的效果展示，最外层以container将所有内容承载，开启相对定位，左右的图片处于同一水平上，这就使用弹性效果flex，然后内容部分使用的是一个content的div去容纳。
然后就是处理文字部分了。这里的文字部分是分成两部分————前一页、后一页，第一页放的是自己的一些信息，昵称、性别、生日......同时使用了阿里的矢量图进行点缀，当点击翻页时可以翻到下一页。
翻页效果的实现。在container中使用了perspective: 1000px和transform-style: preserve-3d开启3D效果，js部分通过选择器将对应的元素选中，这里有一个注意的地方（由于使用的是原生的js ，以选择器选出来的节点都是以类似数组的形式存在，例：var link = document.querySelectorAll(".footer a"); 将获取到的link再进行操作时需要加上下标，例：link[0].addEventListener("click", function (e){}），在调试时我就是在这个细节上调试了比较久。
图片缩放效果和动画过渡效果。鼠标划过时transform: scale(1.5); 图片添加过渡属性transition:all .8s;。
操作也就到这里了，接下来，请看源码部分。
HTML部分
<div class="container">
<div class="home"><img src="./01.jpg" alt="">
<h3>青训营,再出发</h3>
</div>
<div class="content">
<div class="pageOne">
<div class="description">
<span>
<h3>昵称:zhou</h3>
</span>
<span>
<h3>性别:男</h3>
</span>
<span>
<h3>生日:九月九日</h3>
</span>
<span>
<h3>星座:处女座</h3>
</span>
<span>
<h3>学校:XXXX大学</h3>
</span>
<span>
<h3>专业:XXXX专业</h3>
</span>
</div>
<div class="text">
<p>留言:在这个寒假让我们一起愉快的学习吧</p>
</div>
<div class="footer">
想要了解更多吗？<a href="#"> 点击翻到下一页</a>
</div>
</div>
<div class="pageTwo xiaoshi">
<div class="description">
<div class="aihao">
<span>我的爱好</span>
<p>喜欢打篮球，和朋友一起去浪</p>
</div>
<div class="jieshao">
<span>用到了什么</span>
<p>HTML+CSS+JavaScript</p>
</div>
<div class="jianjie">
<span>灵感&思路</span>
<p>在翻书时突发奇想，制作一个翻页的名片，通过js控制标签的隐藏与显示，然后通过动画效果，
当点击链接后，以Y轴垂直翻180度。在翻页的同时将原先的页面隐藏起来（display:none）</p>
</div>
</div>
<div class="text">
<p>寒假不要浪了，快来一起愉快的学习吧</p>
</div>
<div class="footer">
没有更多了哦~<a href="#"> 点击返回上一页</a>
</div>
</div>
</div>
<div class="home"><img src="./01.jpg" alt="">
<h3>我的名片</h3>
</div>
</div>
CSS部分
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-image: linear-gradient(120deg, rgb(201, 254, 254), rgb(98, 202, 243));
}
.container {
position: relative;
display: flex;
perspective: 1000px;
/* 开3D */
transform-style: preserve-3d;
}
.home {
width: 400px;
height: 500px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #fff;
border: 3px snow #8ba0ed;
box-sizing: border-box;
overflow: hidden;
border-radius:0 5px 5px 0 ;
}
.home img {
width: 70%;
margin-bottom: 10px;
transition:all .8s;
}
.home img:hover{
transform: scale(1.5);
}
.home h3 {
color: #888;
font-size: 18px;
}
.home:nth-child(1) {
border-radius: 5px 0 0 5px;
}
.content {
width: 400px;
height: 500px;
position: absolute;
transition: 0.5s;
left: 0;
transform-origin: right;
}
.content .pageOne {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
border-radius: 5px 0 0 5px;
background-image: linear-gradient(to bottom, #63d7fe, #8da3f1);
position: relative;
}
.content .pageTwo {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background-image: linear-gradient(to bottom, #63d7fe, #8ba0ed);
border-radius: 0 5px 5px 0;
transform: rotateY(180deg);
position: relative;
}
.content .xiaoshi {
display: none;
}
.pageOne,
.pageTwo {
padding: 20px;
box-sizing: border-box;
}
.description h3 {
font-size: 16px;
margin-left: 10px;
}
.description span {
display: flex;
align-items: center;
}
.icon {
width: 40px;
height: 40px;
}
.pageOne .footer,
.pageTwo .footer {
color: #fff;
position: absolute;
width: 70%;
left: 50%;
transform: translateX(-50%);
bottom: 40px;
}
a {
text-decoration: none;
color: #fff;
}
.pageTwo .description span {
display: block;
border-bottom: 1px #f5f5f5 solid;
line-height: 24px;
}
.pageTwo .description p {
text-indent: 2em;
}
JS部分
var content = document.getElementsByClassName("content");
var page1 = document.getElementsByClassName("pageOne");
var page2 = document.getElementsByClassName("pageTwo");
// 翻个页
// console.log(page1, page2);
link[0].addEventListener("click", function (e) {
page1[0].classList.add("xiaoshi")
page2[0].classList.remove("xiaoshi")
content[0].style.transform = "rotateY(180deg)"
})
// 翻回来
link[1].addEventListener("click", function (e) {
page1[0].classList.remove("xiaoshi")
page2[0].classList.add("xiaoshi")
content[0].style.transform = "none"
})
