当青训营遇上码上掘金-主题1，我的名片
介绍
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。请大家围绕“我的名片”这个主题进行代码创作。
思路
名片是一张非常简介的卡片，上面介绍一些基本的个人信息，可以让其他人快速的了解你，有需要也可以及时联系到你。为此，按照现实名片的样式做了一张简单的电子卡片。
效果
样式设计
- 分为正反两面，鼠标悬浮到卡片上可以翻转，鼠标移开，卡片恢复原来状态。
- 正面把整体内容分为块，通过
position: absolute;进行定位，把名字放在左上角，联系方式放在右下角。 - 反面头像用
border-radius设置成圆形，放在左侧，右侧是一些简单的介绍。 - style使用
transform,实现翻转效果，0.5s动画持续时间。当光标移到卡片上，卡片依照y轴进行180°翻转，鼠标移开，取消翻转。
涉及属性：
- transform;rotateY(); ——沿着y轴进行3d旋转。
rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 - backface-visibility:hidden;
backface-visibility 属性定义当元素不面向屏幕时是否可见。
如果在旋转元素不希望看到其背面时，使用该属性。 - transition——transition是一个简写属性,用来设置四个属性:transition-property（名称）, transition-duration（时间）, transition-timing-function（速度曲线）, transition-delay（延迟），过渡时间必须设置，否则不会产生过渡效果。
详细代码如下：
<template>
<div class="card">
<div class="box">
<div class="item">
<div class="item-leftup">
<span>Name</span><br>
职位--前端开发
</div>
<div class="item-rightdown">
电话：1568888888<br>
邮箱：asd@163.com<br>
Ｇit：github.com
</div>
</div>
</div>
<div class="mask">
<div class="item">
<div class="item-rightup">
<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F30%2F20200330091314_yNVUZ.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1677728968&t=29262b2484e55a393bf72abb8ce8c9d6">
</div>
<div class="item-rightdown" style="top:80px">
名片是向人介绍自我的重要工具，作为一名程序员用代码做自我介绍是一件非常酷炫的事情。
</div>
</div>
</div>
</div>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup() {
return {
};
},
});
</script>
<style>
.card {
font-size: 10px;
text-align: center;
}
span {
font-family: ”Times New Roman”, Times, serif;
font-size: 20px;
font-weight: 900;
}
.item {
width: 400px;
height: 240px;
border: solid 3px gray;
background-image: url(https://img1.baidu.com/it/u=3697871474,733577694&fm=253&fmt=auto&app=138&f=JPEG?w=780&h=440);
/* background: linear-gradient(135deg,#b2fefa,#0ed2f7); */
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
position: absolute;
}
.item-leftup {
width: 120px;
height: 50px;
border-bottom: outset 1.5px gray;
position: absolute;
top: 30px;
left: 10px;
}
.item-rightup {
width: 50px;
height: 50px;
position: absolute;
top: 30px;
left: 60px;
}
img {
width: 80px;
height: 80px;
border-radius: 50%
}
.item-rightdown {
width: 120px;
height: 80px;
padding-top: 10px;
border-top: outset 1px gray;
position: absolute;
top: 140px;
left: 200px;
text-align: left;
}
.box {
backface-visibility: hidden;
transition: 0.5s ease;
}
.mask {
backface-visibility: hidden;
transform: rotateY(-180deg);
transition: 0.5s ease;
}
.card:hover .box {
transform: rotateY(-180deg);
}
.card:hover .mask {
transform: rotateY(-360deg);
}
</style>
