下面我將為你詳細介紹如何在After Effects中創建撲克牌旋轉特效，并提供可直接使用的HTML/CSS/JS代碼JS代碼示例。
After Effects制作方法
基本步驟
1. 準備工作
2. 創建3D撲克牌
3. 添加旋轉動畫
4. 添加細節效果
HTML/CSS/JS實現方案
以下是使用純前端技術實現的撲克牌旋轉效果：
html
* {
margin: 0;
padding: 0;
box-sizing: border-box;
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
font-family: 'Arial', sans-serif;
overflow: hidden;
.container {
text-align: center;
perspective perspective: 1200px;
h1 {
color: white;
margin-bottom: 40px;
text-shadow: 0 2px 10px rgba(0,0,0,0.3);
.card-container {
width: 300px;
height: 420px;
margin: 0 auto;
position: relative;
transform-style: preserve-3d;
transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
.card {
width: 100%;
height: 100%;
position: absolute;
border-radius: 20px;
backface-visibility: hidden;
box-shadow: 0 15px 35px rgba(0,0,0,0.5);
display: flex;
justify-content: center;
align-items: center;
font-size: 60px;
font-weight: bold;
.front {
background: linear-gradient(45deg, #ffffff, #f0f0f0);
color: #c00;
border: 10px solid white;
.back {
background: linear-gradient(45deg, #ff416c, #ff4b2b);
transform: rotateY(180deg);
background-image:
radial-gradient(circle at 25% 25%, rgba(255,255,255,0.7) 20%, transparent 21%),
radial-gradient(circle at 75% 75%, rgba(255,255,255,0.7) 20%, transparent 21%);
background-size: 50px 50px;
border: 10px solid white;
.controls {
margin-top: 40px;
button {
padding: 12px 24px;
margin: 0 10px;
font-size: 16px;
background: rgba(255,255,255,0.9);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0,0,0,0.3);
button:active {
transform: translateY(1px);
.description {
color: white;
max-width: 600px;
margin: 30px auto 0;
line-height: 1.6;
padding: 20px;
background: rgba(255,255,255,0.1);
border-radius: 15px;
backdrop-filter: blur(5px);
撲克牌3D旋轉特效
特效說明
此演示展示了使用CSS 3D變換實現的撲克牌旋轉效果。
點擊不同按鈕可體驗不同的動畫效果：
- 旋轉撲克牌: 沿Y軸連續旋轉
- 翻轉撲克牌: 展示撲克牌的正反面
- 重置: 恢復到初始狀態
const cardContainer = document.querySelector('.card-container');
const rotateBtn = document.getElementById('rotateBtn');
const flipBtn = document.getElementById('flipBtn');
const resetBtn = document.getElementById('resetBtn');
线上扑克let isRotating = false;
let rotationInterval;
// 旋轉撲克牌
rotateBtn.addEventListener('click', => {
if (isRotating) return;
isRotating = true;
let rotation = 0;
rotationInterval = setInterval( => {
rotation += 2;
cardContainer.style.transform = `rotateY(${rotation}deg)`;
if (rotation >= 720) {
clearInterval(rotationInterval);
isRotating = false;
cardContainer.style.transform = `rotateY(0deg)`;
}, 16); // ~60fps
});
// 翻轉撲克牌
flipBtn.addEventListener('click', => {
if (isRotating) {
clearInterval(rotationInterval);
isRotating = false;
const currentRotation = getCurrentRotation;
cardContainer.style.transform = `rotateY(${currentRotation + 180}deg)`;
});
// 重置
resetBtn.addEventListener('click', => {
if (isRotating) {
clearInterval(rotationInterval);
isRotating = false;
cardContainer.style.transform = `rotateY(0deg)`;
});
// 獲取當前旋轉角度
function getCurrentRotation {
const transformValue = cardContainer.style.transform;
if (!transformValue || transformValue === 'none') return 0;
const match = transformValue.match(/rotateY\\((-?\\d+)deg\\)/);
return match ? parseInt(match[1]) % 360 : 0;
高級AE技巧
如果你希望在After Effects中獲得更專業的效果，可以考慮以下技巧：
1. 多層復合效果
2. 表達式控制
3. 物理模擬
無論你選擇使用After Effects還是前端技術實現，撲克牌旋轉特效的核心都是3D變換的應用。關鍵在于：
你可以根據需要調整上述代碼的參數，如旋轉速度、卡片大小、顏色等，以創建符合你需求的獨特效果。
發表評論