简约可翻动的个人名片

当青训营遇上码上掘金.

主题1： 我的名片

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

前言

这次主题创作活动，由于本人审美设计等能力较弱😅，只是从简入手，做了一个简陋的个人名片，用到了flex布局，css动画，3D转换等知识点。

实现过程

页面结构：.card采用flex布局，按比例分为左4份、右7份两个部分，左边展示个人头像和昵称；右侧采用css的3D转换实现“个人简介”和“新年愿望”两个页面的展示。

  <div class="card">
    <div class="left">
      <div class="aveter">
        <img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/cb199651013241489e7c0b5055e0c546~tplv-k3u1fbpfcp-watermark.image?" alt="">
      </div>
      <span style="font-weight: bolder;font-size: 18px;font-style: italic;">昵称：阿喵</span>
    </div>
    <div class="right">
      <div class="item1 item">
        <h3>简介：</h3>
        <p>一名菜菜的前端程序媛，热爱技术<br/>
                   性格：内向，佛系，有一点点社恐。<br/>
                   爱好：健身，饮茶，看电影，撸猫。<br/>
                   爱去滴地方：猫咖，公园。<br/>
        </p>
      </div>
      <div class="item2 item">
        <h2 style="margin-bottom: 25px;">新年愿望：</h2>
        <h4>希望家人都平平安安，健康快乐!<br/>希望自己在新的一年里事业顺利，技术提升，能结交到志同道合的朋友！</h4>
      </div>
    </div>
  </div>

css样式：容器背景渐变色效果采用 background-image:linear-gradient(0deg,pink,white,85%,pink);实现，左半部分采用flex布局，实现头像和昵称的居中显示，头像旋转效果通过定义动画帧实现。代码如下：

    .left{
            flex: 4;
            border-right: 2px solid #f8f0f0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-image:linear-gradient(0deg,pink,white,85%,pink);
            border-radius: 20px 0 0 20px;
            box-sizing: border-box;
        }
     .aveter{
        width: 80px;
        height: 80px;
        border-radius: 100%;
        box-shadow: 0 0 5px gray;
        padding:5px;
        overflow: hidden;
        margin-bottom: 20px;
        background-color: white;
        animation-name: aveter;
        animation-iteration-count:infinite;
        animation-duration: 3s;
        animation-fill-mode: forwards;
    }
    @keyframes aveter {
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform:rotate(360deg);
        }
    }
    img{
        border-radius: 100%;
        width:100%;
        height:100%;
    }

卡片右半部分.right容器采用“父相子绝”，两个子容器先重叠填充父盒子。.item2先绕X轴旋转90°: transform: rotateX(90deg)，鼠标浮动在父容器上时，再将父容器反向旋转90°。

 .right>.item{
        top:0;
        left:0;
        width:100%;
        height:100%;
        position: absolute; 
        border-radius: 0 20px 20px 0;
        padding: 40px;
        box-sizing: border-box;
    }
    .item1{
        transform: translateZ(137px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .item2{
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-image: linear-gradient(0deg,pink,white,85%,pink);
        transform: rotateX(90deg) translateZ(137px);
    }
    .right:hover{
        transform: rotateX(-90deg);
    }

最后，新年之际祝大家平安健康，技术进步!