当青训营遇上码上掘金

主题 —— 我的名片

为丰富青训营之旅，第五届字节跳动青训营的同学准备了 「青训营 X 码上掘金」主题创作活动入营版。

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

代码讲解

现在3D翻转卡牌效果还是很经常在各大APP里见到的，尤其是近期春节相关的红包、集卡等等的活动中，都可以看到这一组件效果经常被使用到。因此，我结合主题使用纯HTML和CSS制作了简易版的3D翻转名片。

HTML部分的代码主要分为卡牌正面和反面两大部分，正面可以加入一些简单的个人介绍，反面提供基本联系信息。卡牌整体通过center类被居中并使正反两面定位在同一位置，为后续制作翻转效果作准备。

为了保证内容不被镜像显示且防止翻转后内容重叠影响观看效果，对名片添加backface-visibility: hidden的CSS效果是很有用的。另外，通过transform、transition等的属性也可以很好的实现3D效果。

对于展示性的内容，在青训营的课程中也有讲过，需要做到各司其责，由HTML负责内容、CSS负责样式，在本项目中的内容是不必由JS来实现的。

这是第一次使用「码上掘金」写码，结合掘金社区提供了很好的代码成果共享体验，尤其对于前端的展示性项目来说是非常便利的。同时，码上掘金平台也提供了对多种语言和框架的支持，相比于国外的同类型平台来说，在国内使用也更加便利，并有很用户友好的设计交互效果，总体来说是很惊艳的！