当青训营遇上码上掘金。
前言
最近沉迷《孤独摇滚！》，主人公后藤一里是个社交恐惧症患者，但其实在另一面她是吉他技术超群的“Guitar Hero”。刚好这次「青训营 X 码上掘金」主题创作活动的其中一个主题就是“我的名片”。每个人应该都有自己的理想与现实的正反两面，于是我想做一个卡片点击翻转的效果。原理很简单，经典的登陆注册卡片翻转的实现也类似。
《孤独摇滚！》简介如下。
作为网络吉他手“Guitar Hero”而广受好评的后藤一里，在现实中却是个什么都不会的沟通障碍者。一里有着组建乐队的梦想，但因为不敢向人主动搭话而一直没有成功，直到一天在公园中被伊地知虹夏发现并邀请进入缺少吉他手的“结束乐队”。可是，完全没有和他人合作经历的一里，在人前完全发挥不出原本的实力。为了努力克服沟通障碍，一里与“结束乐队”的成员们一同开始努力……（摘自萌娘百科）
主题：我的名片
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
演示
点击头像即可将卡片翻转。
思路
- 单独写两个盒子（卡片反面和卡片正面），使用绝对定位将两个盒子重叠。卡片正面盒子应当写在卡片反面的下面，这样重叠时卡片正面会在上面。
- 使用
rotateY(-180deg)将卡片反面先翻面，使用backface-visibility: hidden;可以使卡片反面背面朝向用户时不可见。 - 为图片添加点击事件，点击图片时，两个盒子各翻转
(180deg)，卡片正面翻到反面，卡片反面翻到正面。
代码实现
代码实现部分省去了部分内容与样式，只保留主要结构，方便理解。
HTML部分：
<div class="container">
<!-- 卡片反面 -->
<div class="card reverse">
<div class="avatar">
<img src=""/>
</div>
</div>
<!-- 卡片正面 -->
<div class="card front">
<div class="avatar">
<img src=""/>
</div>
</div>
</div>
CSS部分：
.card{
position: absolute;
backface-visibility: hidden;
transition: all 1s;
}
.reverse{
transform: rotateY(-180deg);
}
JS部分：
const front = document.querySelector(".front");
const reverse = document.querySelector(".reverse");
const frontButton = front.querySelector(".avatar");
const reverseButton = reverse.querySelector(".avatar");
// 卡片正面翻转
frontButton.addEventListener("click", () => {
front.style.transform="rotateY(180deg)"
reverse.style.transform="rotateY(0deg)"
})
// 卡片反面翻转
reverseButton.addEventListener("click", () => {
reverse.style.transform="rotateY(-180deg)"
front.style.transform="rotateY(0deg)"
})
