```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="front">
<div class="icon">
<i class="fa fa-apple" aria-hidden="true"></i>
</div>
<span>Apple</span>
</div>
<div class="back">
<span>Apple</span>
<p>苹果公司（Apple Inc. ）是美国一家高科技公司。由史蒂夫·乔布斯、斯蒂夫·盖瑞·沃兹尼亚克和罗纳德·杰拉尔德·韦恩（Ron Wayne）等人于1976年4月1日创立。</p>
</div>
</div>
</div>
<style>
* {
/* 初始化 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 100%窗口高度 */
min-height: 100vh;
/* 弹性布局 水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
background-color: #f4f4f4;
}
.container {
/* 弹性布局 允许换行 水平居中 */
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.box {
width: 350px;
margin: 10px;
text-align: center;
/* 相对定位 */
position: relative;
/* 开启3D效果 */
transform-style: preserve-3d;
/* 设置视距 */
perspective: 3000px;
}
.box .front {
background-color: #fff;
width: 100%;
height: 220px;
/* 弹性布局 垂直排列 垂直居中 */
display: flex;
flex-direction: column;
justify-content: center;
/* 阴影 */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
/* 设置过渡 */
transition: 0.5s ease;
}
.box .front .icon {
height: 80px;
}
.box .front .icon i,
.box .front span {
/* 渐变背景 */
background: linear-gradient(220deg, #02dbb0, #007adf);
/* 以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉 */
-webkit-background-clip: text;
/* 将文字透明镂空 */
-webkit-text-fill-color: transparent;
}
.box .front .icon i {
font-size: 65px;
font-weight: 900;
}
.box .front span,
.box .back span {
font-size: 22px;
font-weight: 600;
text-transform: uppercase;
}
.box .back {
/* 绝对定位 */
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 220px;
background: linear-gradient(220deg, #02dbb0, #007adf);
padding: 30px;
color: #fff;
/* 默认不透明度为0 */
opacity: 0;
/* 默认位置下移并旋转-90度 */
transform: translateY(110px) rotateX(-90deg);
/* 设置过渡 */
transition: 0.5s ease;
}
.box .back p {
margin-top: 12px;
/* 文本两端对齐 */
text-align: justify;
line-height: 23px;
}
/* 鼠标移入卡片，两个面做出相应变化 */
.box:hover .front {
opacity: 0;
transform: translateY(-110px) rotateX(90deg);
}
.box:hover .back {
opacity: 1;
transform: translateY(0) rotateX(0);
}
</style>
<script>
</script>
</body>
</html>
```
