```
<!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>
```
