旋转扑克牌怎么做

我将为你制作一个优雅的旋转扑克牌动画效果。这个设计模拟了真实扑克牌的物理特性，包括旋转、光影和逼真的卡片材质。

思路分析

1. 创建扑克牌的3D效果，包括正面和背面

2. 实现平滑的旋转动画

3. 添加适当的光影效果增强立体感

4. 确保响应式设计，适应不同设备

最终实现代码

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, #2c3e50, #4a6491);

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

overflow: hidden;

.container {

position: relative;

width: 100%;

max-width: 800px;

text-align: center;

padding: 20px;

h1 {

color: white;

margin-bottom: 40px;

text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);

font-weight: 300;

letter-spacing: 2px;

.card-container {

perspective: 1000px;

margin: 0 auto;

width: 200px;

height: 280px;

cursor: pointer;

transition: transform 0.3s ease;

.card-container:hover {

transform: scale(1.05);

.card {

width: 100%;

height: 100%;

position: relative;

transform-style: preserve-3d;

transition: transform 1.2s cubic-bezier(0.68, -0.55, 0.27, 1.55);

box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);

border-radius: 15px;

.card.flipped {

transform: rotateY(180deg);

.card-face {

position: absolute;

width: 100%;

height: 100%;

backface-visibility: hidden;

border-radius: 15px;

display: flex;

flex-direction: column;

justify-content: space-between;

padding: 10px;

.card-front {

background: linear-gradient(to bottom right, #fff, #f9f9f9);

transform: rotateY(180deg);

border: 1px solid #eaeaea;

.card-back {

background: linear-gradient(45deg, #c62828, #b71c1c);

background-image:

repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255,255,255,.05) 20px, rgba(255,255,255,.05) 30px),

radial-gradient(circle at 60% 70%, #ff5252, transparent 80%);

background-blend-mode: overlay;

border: 1px solid #a00;

.card-corner {

display: flex;

flex-direction: column;

align-items: center;

font-size: 24px;

font-weight: bold;

line-height: 22px;

.top-left {

align-self: flex-start;

.bottom-right {

align-self: flex-end;

transform: rotate(180deg);

.red {

color: #c62828;

.black {

color: #212121;

.card-center {

font-size: 72px;

display: flex;

justify-content: center;

align-items: center;

flex-grow: 1;

.controls {

margin-top: 40px;

display: flex;

justify-content: center;

gap: 15px;

button {

background: rgba(255, 255, 255, 0.1);

border: 1px solid rgba(255, 255, 255, 0.3);

color: white;

padding: 12px 25px;

border-radius: 30px;

cursor: pointer;

transition: all 0.3s ease;

backdrop-filter: blur(5px);

font-size: 16px;

letter-spacing: 1px;

button:hover {

background: rgba(255, 255, 255, 0.2);

transform: translateY(-3px);

box-shadow: 0 7px 14px rgba(0, 0, 0, 0.2);

.info {

color: rgba(255, 255, 255, 0.8);

margin-top: 30px;

line-height: 1.6;

max-width: 500px;

margin-left: auto;

margin-right: auto;

@media (max-width: 600px) {

.card-container {

width: 160px;

height: 224px;

.card-center {

font-size: 56px;

.card-corner {

font-size: 18px;

.controls {

flex-direction: column;

align-items: center;

document.addEventListener('DOMContentLoaded', function {

const card = document.querySelector('.card');

const flipBtn = document.getElementById('flipBtn');

const autoFlipBtn = document.getElementById('autoFlipBtn');

const spinBtn = document.getElementById('spinBtn');

const cardContainer = document.querySelector('.card-container');

let autoFlipInterval;

let isSpinning = false;

// 点击卡片翻转

cardContainer.addEventListener('click', function {

card.classList.toggle('flipped');

});

// 翻转按钮

flipBtn.addEventListener('click', function {

card.classList.toggle('flipped');

});

// 自动翻转按钮

autoFlipBtn.addEventListener('click', function {

if (autoFlipInterval) {

clearInterval(autoFlipInterval);

autoFlipInterval = null;

autoFlipBtn.textContent = '自动翻转';

} else {

autoFlipInterval = setInterval(function {

card.classList.toggle('flipped');

}, 1500);

autoFlipBtn.textContent = '停止自动';

// 如果正在旋转，停止旋转

if (isSpinning) {

card.style.animation = 'none';

isSpinning = false;

spinBtn.textContent = '持续旋转';

});

// 持续旋转按钮

spinBtn.addEventListener('click', function {

if (!isSpinning) {

card.style.animation = 'spin 3s linear infinite';

spinBtn.textContent = '停止旋转';

// 如果正在自动翻转，停止自动翻转

if (autoFlipInterval) {

clearInterval(autoFlipInterval);

autoFlipInterval = null;

autoFlipBtn.textContent = '自动翻转';

} else {

card.style.animation = 'none';

spinBtn.textContent = '持续旋转';

isSpinning = !isSpinning;

});

});

/* 持续旋转的动画 */

@keyframes spin {

0% { transform: rotateY(0); }

100% { transform: rotateY(360deg); }

功能说明

1. 基础交互：

2. 特殊效果：

3. 设计特点：

技术要点

这个实现展示了如何使用现代CSS和少量JavaScript创建引人注目的3D旋转效果。