【css酷炫效果】純CSS實現3D翻轉卡片動畫
- 緣
- 創作背景
- html結構
- css樣式
- 完整代碼
- 效果圖
想直接拿走的老板，鏈接放在這里：https://download.csdn.net/download/u011561335/90490472
緣
創作隨緣，不定時更新。
創作背景
剛看到csdn出活動了，趕時間，直接上代碼。
html結構
<div style='text-align:center;margin-top:50px;'><div class="card-container"><div class="card"><div class="front">正面內容</div><div class="back">背面內容</div></div><!-- 復制多個卡片 --><div class="card">...</div></div></div>
css樣式
/* 容器設置透視 */
.card-container {display: flex;justify-content: center;gap: 40px;perspective: 1000px;
}/* 卡片基礎樣式 */
.card {width: 300px;height: 450px;position: relative;cursor: pointer;transform-style: preserve-3d; /* 啟用3D空間 */transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}/* 正反面公共樣式 */
.front, .back {position: absolute;width: 100%;height: 100%;border-radius: 30px;display: flex;align-items: center;justify-content: center;backface-visibility: hidden; /* 隱藏背面 */box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}/* 正面樣式 */
.front {background: linear-gradient(45deg, #b490ca, #5ee7df);font-size: 30px;color: white;
}/* 背面旋轉180度并設置不同背景 */
.back {background: linear-gradient(45deg, #badbe9, #e0c7e3);transform: rotateY(180deg);
}/* 懸停觸發翻轉 */
.card:hover {transform: rotateY(180deg);
}
完整代碼
<!DOCTYPE html>
<html>
<head>
<style>
/* 容器設置透視 */
.card-container {display: flex;justify-content: center;gap: 40px;perspective: 1000px;
}/* 卡片基礎樣式 */
.card {width: 300px;height: 450px;position: relative;cursor: pointer;transform-style: preserve-3d; /* 啟用3D空間 */transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}/* 正反面公共樣式 */
.front, .back {position: absolute;width: 100%;height: 100%;border-radius: 30px;display: flex;align-items: center;justify-content: center;backface-visibility: hidden; /* 隱藏背面 */box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}/* 正面樣式 */
.front {background: linear-gradient(45deg, #b490ca, #5ee7df);font-size: 30px;color: white;
}/* 背面旋轉180度并設置不同背景 */
.back {background: linear-gradient(45deg, #badbe9, #e0c7e3);transform: rotateY(180deg);
}/* 懸停觸發翻轉 */
.card:hover {transform: rotateY(180deg);
}
</style>
</head>
<body><div style='text-align:center;margin-top:50px;'><div class="card-container"><div class="card"><div class="front">正面內容</div><div class="back">背面內容</div></div><!-- 復制多個卡片 --><div class="card">...</div></div></div></body>
</html>
效果圖
