当青训营遇上码上掘金之“我的名片”

当青训营遇上码上掘金 主题 1：我的名片

概述

名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。名片的设计参考了学生证的设计模式，由于（拖到了最后）时间的不足，所以在设计上就非常的简洁(,主要想展示的是其动态翻转的效果，顺便宣传一下我喜欢的作品。

代码构成与实现

html 结构

在 html 的结构也是怎么方便怎么来，卡的正面化为头部和主体两个部分，头部作为发放单位的名称的展示地，主体展示名片主人的肖像和信息。主体分为左右两个部分，即肖像和信息。卡的背面放了一张图片做“卡背”，本来是想再设计一下的，可惜时间不够了，下次我一定早点写，大家不要学我。

<div class="item">
   <div class="card item-front">
      <nav class="header"><span>{{army}}</span></nav>
       <nav class="block_1"></nav>
       <div class="main">
           <div class="pic"><img src="./kdl.png" alt=""></div>
           <div class="message">
               <ul>
                   <li>姓名：<span>{{MyName}}</span></li>
                   <li>所属：<span>{{Belongs}}</span></li>
                   <li>职务：<span>{{status}}</span></li>
                   <li>所属圣剑：<span>{{carillon}}</span></li>
                   <li>管理员：<span>{{administrator}}</span></li>
               </ul>
           </div>
       </div>
   </div>
   <div class="card item-back">
       <div class="pic_1"><img src="./1.png" alt=""></div>
   </div>
</div>

CSS 效果

以下 CSS 代码用于完成布局和基本样式，前面三个属性是基本的格式化样式，我每个项目都会先把它们丢上去，后面的就是一些基本的布局了，在主体部分使用了弹性盒来使两个 div 同行展示，使用border-radius属性来让名片的四个角变得圆润。

     li {
            list-style-type: none;
        }

        a {
            text-decoration: none !important
        }

        [v-cloak] {
            display: none;
        }
        .card {
            max-width: 400px;
            max-height: 200px;
            border-radius: 1em;
            box-shadow: 1px 1px 1px #000;
        }

        .main {
            display: inline-flex;
        }

        .header {
            height: 40px;
            border-radius: 1em 1em 0 0;
            background-color: rgb(108, 216, 240);
            line-height: 40px;
        }

        .header span {
            padding-left: 15px;
        }

        .pic {
            width: 130px;
            height: 150px;
        }

        .block_1 {
            height: 2px;
            background-color: #000;
        }

        .pic img {
            padding-left: 10px;
            width: 120px;
            height: 150px;
        }

        .pic_1 img {
            width: 400px;
            height: 200px;
        }

        ul li {
            padding-bottom: 5px;
        }

        .message ul li {
            font-size: 12px;
        }

        .message ul li span {
            font-size: 16px;
        }

实现名片的翻转主要利用 CSS3 的 perspective 结合 transform:ratateY() 属性完成。当为元素定义 perspective 属性时，其子元素会获得透视效果，这个属性允许你改变3D元素是怎样查看透视图且只影响 3D 转换元素。
将两个要展示的div利用定位重叠在一起，其中一个首先围绕 Y 轴旋转一定角度,这样两个面就朝向了相反的角度，使其每一次旋转后一面面向屏幕，另一面背向屏幕，只将面向屏幕的那一面展示出来，而将背向屏幕的面隐藏起来，便能实现翻转的效果。

.item {
    margin: 0 auto;
    width: 400px;
    height: 200px;
    cursor: pointer;
    position: relative;
    perspective: 500;
    -webkit-perspective: 500;
 }
.item-front,
.item-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    -webkit-perspective: 1000;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
    box-shadow: rgba(50, 50, 50, 0.2) 0 0 15px;
    overflow: hidden;
    backface-visibility:hidden
}
.item-back {
    position: relative;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}
.item:hover .item-front {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
}

.item:hover .item-back {
    transform: rotateY(-360deg);
    -webkit-transform: rotateY(-360deg);
}

效果展示

将鼠标放在名片上，名片便会转到背面，将鼠标移走，名片便会返回正面。欢迎大家指正和交流，大家一起学习。