当青训营遇上码上掘金
前言
本次我用HTML和CSS实现了一个鼠标悬停后，能使卡片翻转的效果。
正面显示了一张图片，反面则是个人情况的概述以及与联系方式相关的图标
以下是效果展示：
要求
主题 1：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
实现
1.HTML部分
我们用容器container来容纳我们的两个卡片，其中可分为两个部分：正面front和反面back。 正面希望就是一个美观的展示画面，而背面则是一些文字性的个人描述，以及下方的联系方式。 联系方式用contact-info来包含。
为使得做出来的效果更加协调，再设计middle类来对页面中的元素进行居中处理。
最后设计的HTML大致骨架如下：
<body class="middle">
<div class="container middle">
<div class="front middle">
<img src="#" alt="" />
</div>
<div class="back">
<h2>我的名片</h2>
<p>以下是我的一些介绍：</p>
<p>
大家好，我是一名爱好学习CS且练习时长两年半的个人练习生，喜欢唱、跳、rap、篮球。
</p>
<div class="contact-info">
<a href="#"><i class="fab fa-github"></i></a>
<a href="#"><i class="fab fa-weixin"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin"></i></a>
</div>
</div>
</div>
</body>
2. CSS部分
在不同浏览器中，html元素的默认外边距和内边距并不相同，需要我们来进行视觉重置，改善一下布局
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
background-color: #bdc3c7;
}
此外还需设置元素的垂直水平居中：
.middle {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
正面卡片和背面卡片事实上一开始重合在一个地方，但我们只想在看到正面的时候看不到反面，翻转过来也是这样。为此，可以使用backface-visibilityat.front和.back。这样做，我们无论看到哪一侧，另一侧也不会被看到了。
.front,
.back {
width: 100%;
height: 100%;
position: absolute;
backface-visibility: hidden;
box-shadow: 0 0 10px #2c3e50;
transition: 0.8s;
}
接下来设置卡片的翻转，触发这个的前提是鼠标的悬停。把CSS元素想象成一个正方体模型，要想要背对视线的那一面显示在我们面前，需要我们将正方体选择180°，同理，我们希望鼠标触发悬停时，卡片的背面能旋转到我们的视线内，那就需要使用rotateY()，来让它在 Y 轴上旋转180deg.
.front {
background: url(#);
background-size: cover;
transform: perspective(1000px) rotateY(0deg);
}
.back {
transform: perspective(1000px) rotateY(180deg);
overflow: hidden;
}
.container:hover .front {
transform: perspective(900px) rotateY(-180deg);
}
.container:hover .back {
transform: perspective(900px) rotateY(00deg);
}
最后是图片的设置
使用 display:inline-flex 来创建一个自动化的网格系统。每个图标都将是一个40px的正方形. 位于 flexbox 的中间且有与背面卡片同样的背景色。
为了使图标更加突出，使用 border-radius 来创建一个50%圆圈，颜色采用了更加鲜艳的颜色，这样当我们的鼠标悬停在它上面时，这个圆圈就会突出地显示出来。
.back .contact-info {
position: absolute;
left: 50%;
margin-left: -88px;
top: 90%;
}
.back .contact-info a {
display: inline-flex;
justify-content: center;
align-items: center;
width: 40px;
height: 40px;
font-size: 20px;
text-decoration: none;
color: #2c3e50;
border-radius: 50%;
}
.back .contact-info a:hover {
color: white;
background-color: #db4c1c;
}
