```
<!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="card">
<!-- 卡片正面 -->
<div class="front">
<p>旋轉卡片~</p>
</div>
<!-- 卡片背面 -->
<div class="back">
<p>1~</p>
<p>2~</p>
<p>3~</p>
<p>4~</p>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 彈性布局，讓頁面元素水平+垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 設置body高度為100%窗口高度 */
height: 100vh;
/* 背景漸變色 */
background-image: linear-gradient(200deg, #5ee7df, #b490ca);
/* 這里現在我們的動畫看起來有點生硬，沒有任何立體感，所以我們需要添加這個屬性來增加卡片旋轉的立體感，這個值越小，立體感就會越明顯，立體感最明顯的地方就是近大遠小，這個的意思就是設置視距，相當于你的眼睛離一個東西的距離，當這個東西離你的眼睛越近，那么這個東西就會越大 */
perspective: 1000px;
}
.card {
/* 相對定位 */
position: relative;
width: 300px;
height: 450px;
/* 圓角 */
border-radius: 30px;
/* 鼠標移到元素上光標變為小手 */
cursor: pointer;
background-color: #fff;
box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
/* 給父元素加一個3D盒子屬性，那么子元素就到背面了，這個屬性是加到父元素上，但是影響的是子元素 */
transform-style: preserve-3d;
/* 給卡片添加默認動畫 */
animation: rotate-reverse 1.2s cubic-bezier(0.66, -0.47, 0.33, 1.5) forwards;
}
/* 鼠標移入卡片時執行動畫 */
.card:hover {
/* 動畫（名稱 時長 第三個屬性是貝塞爾曲線，我們可以自定義動畫的運動軌跡，讓動畫的運動軌跡有了很多種可能 第四個屬性是當我們的動畫完成時的狀態，一般動畫完成之后就回到了0%的狀態，默認值是backwards，當我們給的屬性值是forwards時那么動畫到100%的時候就會停下來，不會回到0%） */
animation: rotate 1.2s cubic-bezier(0.66, -0.47, 0.33, 1.5) forwards;
}
.front,
.back {
/* 絕對定位 子元素是絕對定位，父元素需要相對定位 */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* 彈性布局，讓元素垂直陳列 */
display: flex;
flex-direction: column;
/* 現在子元素垂直陳列，那么就是讓子元素水平居中 */
align-items: center;
/* 平均分配高度給每一個子元素 */
justify-content: space-around;
font-size: 20px;
background-color: #fff;
border-radius: 30px;
backface-visibility: hidden;
}
.back {
/* 因為背面卡片要到后面去，所以我們給背面卡片加一個沿Y軸旋轉180度的屬性，這里我們可以看到旋轉了但是沒有到后面去，原因就是父盒子現在不是3D盒子，而是一個2D盒子，所以我們需要讓父元素變成3D盒子 */
transform: rotateY(180deg);
}
/* 下面我們定義一下旋轉動畫 */
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(180deg);
}
}
@keyframes rotate-reverse {
0% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(0deg);
}
}
</style>
<script>
</script>
</body>
</html>
```
