当青训营遇上码上。

前言

波奇酱的名片|「青训营 X 码上掘金」主题创作

最近沉浸《孤单摇滚！》，主人公后藤一里是个交际恐惧症患者，但其实在另一面她是吉他技能超群的“Guitar Hero”。刚好这次「青训营 X 码上」主题创造活动的其中一个主题就是“我的手刺”。每个人应该都有自己的理想与实际的正反两面，于是我想做一个卡片点击翻转的作用。原理很简单，经典的登陆注册卡片翻转的完成也类似。

《孤单摇滚！》简介如下。

作为网络吉他手“Guitar Hero”而广受好评的后藤一里，在实际中却是个什么都不会的交流妨碍者。一里有着组成乐队的愿望，但由于不敢向人自动搭腔而一向没有成功，直到一天在公园中被伊地知虹夏发现并邀请进入短少吉他手的“结束乐队”。但是，彻底没有和他人协作经历的一里，在人前彻底发挥不出本来的实力。为了尽力克服交流妨碍，一里与“结束乐队”的成员们一起开始尽力……（摘自萌娘百科）

主题：我的手刺

手刺是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件十分酷炫的工作。请大家环绕“我的手刺”这个主题进行代码创造。

演示

点击头像即可将卡片翻转。

波奇酱的名片|「青训营 X 码上掘金」主题创作

思路

  • 独自写两个盒子（卡片不和和卡片正面），运用肯定定位将两个盒子堆叠。卡片正面盒子应当写在卡片不和的下面，这样堆叠时卡片正面会在上面。
  • 运用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)"
})

波奇酱的名片|「青训营 X 码上掘金」主题创作