青训营遇上码上掘金

主题 ：我的名片

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。

作品效果图

名片的正面是个人的信息包括青训营截止到目前所有的笔记 唯二的亮点：

• 名片设计了正反两面，点击即可反转
• 鼠标悬停在头像上会一直旋转

实现过程

正反旋转效果

1. 首先需要正反两块内容

<div id="card">
    <div class="front">
        ...
    </div>
    <div class="back">
    ...
    </div>
</div>

2. 设置3d旋转

#card {
    transform-style: preserve-3d;
}

3. 初始化正反两容器的旋转角度

.front {
    backface-visibility: hidden;
}

.back {
    position: absolute;
    backface-visibility: hidden;
    transform: rotateY(180deg);
}

position: absolute;这是为了使正反两面重合

backface-visibility:hidden容器背面朝向用户时不可见

初始时，front展示的是正面，而back是背面，因为背面不可见，所以back上的内容并不被展示出来

4. 增加行为

我采取的方法是对类名的修改来达到修改样式的目的，所以我们需要添加对应的翻转效果

.reversal {
    transform: rotateY(180deg);
}

.reversal-back {
    transform: rotateY(0deg);
}

绑定事件

let front = document.querySelector(".front");
let back = document.querySelector(".back");

document.getElementById("card").addEventListener("click", function () {
  if (front.classList.contains("reversal")) {
    front.classList.remove("reversal");
    back.classList.remove("reversal-back");
  } else {
    front.classList.add("reversal");
    back.classList.add("reversal-back");
  }
});

front.classList.contains用于判断front节点是否存在reversal类名，因为两个节点都是同时绑定同时去除的，所以只需判断一个即可

感想

CSS中对于帧动画animation属性值的了解不够，出现使用不熟练的情况

习惯使用框架后，对原生JS相关的知识存在遗忘，在绑定事件的时候竟然忘记写事件名称┭┮﹏┭┮