当青训营遇上码上掘金【主题1】

当青训营遇上码上掘金，我选择了主题1进行创作

一、主题要求

用代码制作一张介绍自己的名片。

二、分析与创想

我打算将这张“名片”呈现出真实卡片的样子。首先，真实生活中的名片是有两面的，正反两面可以翻转。所以要①设计出可以翻转的效果。
既然有两面，那我打算根据②我的“表里”来介绍自己，例如：表面介绍我的身份信息、个人情况，反面介绍我的内心独白、个性属性等。
最后就是一些③布局的调整和颜色的设计，还有卡片的阴影。

三、部分代码展示

.avatar{
  display: flex;
  justify-content: center;
  width: 120px;
  height: 120px;
  background-color: rgb(253, 252, 252);
  overflow: hidden;
  cursor: pointer;
}

🔺🔺🔺这里是正反两面头像的样式设计，主要是根据实际的图片来调整大小，可能会出现原图不能填满/溢出该尺寸。还有就是鼠标移到该处，要改变形状，提示别人点击头像达到翻面的效果。

frontButton.addEventListener("click", () => {
  front.style.transform="rotateY(180deg)"
  reverse.style.transform="rotateY(0deg)"
})

🔺🔺🔺这里是使用CSS3 3D transform变换，实现卡片绕Y轴转动180度。

⏰补充一下3D transform

四、作品总结与反思

1.我有参考这个活动上个月展示的获奖作品，我注意到有些作品的代码，看起来有些混乱，他们将内容和样式混合起来。不过这个作品比较简单，就算没有做到将html,css,js职能分开，也不会有什么麻烦的后果。但最好还是养成职能分开的代码习惯。

2.其实就是一些最基础的知识的拼凑，没有太大的难度。可能就是在网络上找图片的时候要注意格式，有些格式不能在码上掘金平台显示出来。

3.在观看别人作品的时候，我也学习参考到一些设计思路，发现自己有点死板，设计效果不够生动、丰富。