<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五种3D图片切换效果</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.perspective-1000 {
perspective: 1000px;
}
.preserve-3d {
transform-style: preserve-3d;
}
.backface-hidden {
backface-visibility: hidden;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
.rotate-x-180 {
transform: rotateX(180deg);
}
.translate-z-0 {
transform: translateZ(0);
}
.translate-z-50 {
transform: translateZ(50px);
}
.transition-transform {
transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.slider-shadow {
box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
}
}
</style>
</head>
<body class="bg-gray-100 min-h-screen font-sans">
<div class="container mx-auto px-4 py-12 max-w-6xl">
<header class="text-center mb-12">
<h1 class="text-[clamp(1.8rem,4vw,3rem)] font-bold text-gray-800 mb-4">五种3D图片切换效果</h1>
<p class="text-gray-600 text-lg max-w-3xl mx-auto">探索五种令人惊叹的3D图片切换效果，为你的网站增添现代感和交互性。</p>
</header>
<div class="grid grid-cols-1 md:grid-cols-2 gap-10 mb-16">
<!-- 效果1: 3D翻转效果 -->
<div class="bg-white rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fa fa-refresh mr-2 text-primary"></i>3D翻转效果
</h2>
<div class="perspective-1000 h-[300px] relative">
<div id="flipSlider" class="relative w-full h-full preserve-3d">
<div class="absolute w-full h-full backface-hidden slider-shadow">
</div>
<div class="absolute w-full h-full backface-hidden rotate-y-180 slider-shadow">
<img src="https://picsum.photos/seed/flip2/800/600" alt="3D翻转图片2" class="w-full h-full object-cover">
</div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<button id="flipPrev" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
<i class="fa fa-chevron-left mr-1"></i> 上一张
</button>
<span id="flipCounter" class="text-gray-600">1 / 2</span>
<button id="flipNext" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
下一张 <i class="fa fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- 效果2: 3D旋转木马 -->
<div class="bg-white rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fa fa-sliders mr-2 text-primary"></i>3D旋转木马
</h2>
<div class="perspective-1000 h-[300px] relative">
<div id="carouselSlider" class="relative w-full h-full preserve-3d">
<div class="absolute inset-0 preserve-3d">
<div class="absolute w-full h-full slider-shadow" style="transform: rotateY(0deg) translateZ(250px);">
<img src="https://picsum.photos/seed/carousel1/800/600" alt="3D旋转木马图片1" class="w-full h-full object-cover">
</div>
<div class="absolute w-full h-full slider-shadow" style="transform: rotateY(72deg) translateZ(250px);">
<img src="https://picsum.photos/seed/carousel2/800/600" alt="3D旋转木马图片2" class="w-full h-full object-cover">
</div>
<div class="absolute w-full h-full slider-shadow" style="transform: rotateY(144deg) translateZ(250px);">
<img src="https://picsum.photos/seed/carousel3/800/600" alt="3D旋转木马图片3" class="w-full h-full object-cover">
</div>
<div class="absolute w-full h-full slider-shadow" style="transform: rotateY(216deg) translateZ(250px);">
<img src="https://picsum.photos/seed/carousel4/800/600" alt="3D旋转木马图片4" class="w-full h-full object-cover">
</div>
<div class="absolute w-full h-full slider-shadow" style="transform: rotateY(288deg) translateZ(250px);">
<img src="https://picsum.photos/seed/carousel5/800/600" alt="3D旋转木马图片5" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<button id="carouselPrev" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
<i class="fa fa-chevron-left mr-1"></i> 上一张
</button>
<span id="carouselCounter" class="text-gray-600">1 / 5</span>
<button id="carouselNext" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
下一张 <i class="fa fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- 效果3: 3D堆叠卡片 -->
<div class="bg-white rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fa fa-th-large mr-2 text-primary"></i>3D堆叠卡片
</h2>
<div class="perspective-1000 h-[300px] relative">
<div id="stackSlider" class="relative w-full h-full preserve-3d">
<div class="absolute w-full h-full slider-shadow transform transition-all duration-500" style="transform: translateZ(0); z-index: 3;">
<img src="https://picsum.photos/seed/stack1/800/600" alt="3D堆叠卡片图片1" class="w-full h-full object-cover">
</div>
<div class="absolute w-full h-full slider-shadow transform transition-all duration-500" style="transform: translateZ(-50px) scale(0.95); z-index: 2;">
<img src="https://picsum.photos/seed/stack2/800/600" alt="3D堆叠卡片图片2" class="w-full h-full object-cover">
</div>
<div class="absolute w-full h-full slider-shadow transform transition-all duration-500" style="transform: translateZ(-100px) scale(0.9); z-index: 1;">
<img src="https://picsum.photos/seed/stack3/800/600" alt="3D堆叠卡片图片3" class="w-full h-full object-cover">
</div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<button id="stackPrev" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
<i class="fa fa-chevron-left mr-1"></i> 上一张
</button>
<span id="stackCounter" class="text-gray-600">1 / 3</span>
<button id="stackNext" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
下一张 <i class="fa fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- 效果4: 3D翻页效果 -->
<div class="bg-white rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fa fa-book mr-2 text-primary"></i>3D翻页效果
</h2>
<div class="perspective-1000 h-[300px] relative">
<div id="pageSlider" class="relative w-full h-full preserve-3d">
<div class="absolute w-full h-full backface-hidden slider-shadow">
<img src="https://picsum.photos/seed/page1/800/600" alt="3D翻页效果图片1" class="w-full h-full object-cover">
</div>
<div class="absolute w-full h-full backface-hidden rotate-x-180 slider-shadow">
<img src="https://picsum.photos/seed/page2/800/600" alt="3D翻页效果图片2" class="w-full h-full object-cover">
</div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<button id="pagePrev" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
<i class="fa fa-chevron-left mr-1"></i> 上一张
</button>
<span id="pageCounter" class="text-gray-600">1 / 2</span>
<button id="pageNext" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
下一张 <i class="fa fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
<!-- 效果5: 3D折叠效果 -->
<div class="bg-white rounded-xl shadow-xl overflow-hidden transform hover:scale-[1.01] transition-all duration-300 md:col-span-2">
<div class="p-6">
<h2 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
<i class="fa fa-clone mr-2 text-primary"></i>3D折叠效果
</h2>
<div class="perspective-1000 h-[300px] relative">
<div id="foldSlider" class="relative w-full h-full preserve-3d">
<div class="absolute w-full h-full slider-shadow">
<div class="w-full h-full flex">
<div class="w-1/3 h-full overflow-hidden">
<img src="https://picsum.photos/seed/fold1/300/600" alt="3D折叠效果图片1-1" class="w-full h-full object-cover">
</div>
<div class="w-1/3 h-full overflow-hidden" id="foldPanel1">
<img src="https://picsum.photos/seed/fold1/300/600" alt="3D折叠效果图片1-2" class="w-full h-full object-cover">
</div>
<div class="w-1/3 h-full overflow-hidden" id="foldPanel2">
<img src="https://picsum.photos/seed/fold1/300/600" alt="3D折叠效果图片1-3" class="w-full h-full object-cover">
</div>
</div>
</div>
<div class="absolute w-full h-full slider-shadow opacity-0">
<div class="w-full h-full flex">
<div class="w-1/3 h-full overflow-hidden">
<img src="https://picsum.photos/seed/fold2/300/600" alt="3D折叠效果图片2-1" class="w-full h-full object-cover">
</div>
<div class="w-1/3 h-full overflow-hidden">
<img src="https://picsum.photos/seed/fold2/300/600" alt="3D折叠效果图片2-2" class="w-full h-full object-cover">
</div>
<div class="w-1/3 h-full overflow-hidden">
<img src="https://picsum.photos/seed/fold2/300/600" alt="3D折叠效果图片2-3" class="w-full h-full object-cover">
</div>
</div>
</div>
</div>
</div>
<div class="mt-4 flex justify-between items-center">
<button id="foldPrev" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
<i class="fa fa-chevron-left mr-1"></i> 上一张
</button>
<span id="foldCounter" class="text-gray-600">1 / 2</span>
<button id="foldNext" class="bg-gray-200 hover:bg-gray-300 text-gray-700 py-2 px-4 rounded-lg font-medium transition-all">
下一张 <i class="fa fa-chevron-right ml-1"></i>
</button>
</div>
</div>
</div>
</div>
<footer class="text-center py-8 text-gray-500 text-sm">
<p>© 2025 五种3D图片切换效果展示 | 使用 HTML, CSS3 和 JavaScript 构建</p>
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 效果1: 3D翻转效果
const flipSlider = document.getElementById('flipSlider');
const flipPrev = document.getElementById('flipPrev');
const flipNext = document.getElementById('flipNext');
const flipCounter = document.getElementById('flipCounter');
let flipCurrent = 1;
let flipTotal = 2;
let flipDirection = 'right';
function updateFlipCounter() {
flipCounter.textContent = `${flipCurrent} / ${flipTotal}`;
}
function flipSlide() {
if (flipDirection === 'right') {
flipSlider.style.transform = 'rotateY(180deg)';
} else {
flipSlider.style.transform = 'rotateY(0deg)';
}
}
flipNext.addEventListener('click', function() {
flipDirection = 'right';
flipCurrent = flipCurrent === flipTotal ? 1 : flipCurrent + 1;
updateFlipCounter();
flipSlide();
});
flipPrev.addEventListener('click', function() {
flipDirection = 'left';
flipCurrent = flipCurrent === 1 ? flipTotal : flipCurrent - 1;
updateFlipCounter();
flipSlide();
});
// 效果2: 3D旋转木马
const carouselSlider = document.getElementById('carouselSlider');
const carouselPrev = document.getElementById('carouselPrev');
const carouselNext = document.getElementById('carouselNext');
const carouselCounter = document.getElementById('carouselCounter');
let carouselCurrent = 1;
let carouselTotal = 5;
let carouselRotation = 0;
function updateCarouselCounter() {
carouselCounter.textContent = `${carouselCurrent} / ${carouselTotal}`;
}
carouselNext.addEventListener('click', function() {
carouselRotation -= 72;
carouselCurrent = carouselCurrent === carouselTotal ? 1 : carouselCurrent + 1;
carouselSlider.style.transform = `rotateY(${carouselRotation}deg)`;
updateCarouselCounter();
});
carouselPrev.addEventListener('click', function() {
carouselRotation += 72;
carouselCurrent = carouselCurrent === 1 ? carouselTotal : carouselCurrent - 1;
carouselSlider.style.transform = `rotateY(${carouselRotation}deg)`;
updateCarouselCounter();
});
// 效果3: 3D堆叠卡片
const stackSlider = document.getElementById('stackSlider');
const stackPrev = document.getElementById('stackPrev');
const stackNext = document.getElementById('stackNext');
const stackCounter = document.getElementById('stackCounter');
let stackCurrent = 1;
let stackTotal = 3;
let stackImages = [
'https://picsum.photos/seed/stack1/800/600',
'https://picsum.photos/seed/stack2/800/600',
'https://picsum.photos/seed/stack3/800/600'
];
function updateStackCounter() {
stackCounter.textContent = `${stackCurrent} / ${stackTotal}`;
}
function updateStackImages() {
const panels = stackSlider.querySelectorAll('div');
const newImages = [...stackImages.slice(stackCurrent - 1), ...stackImages.slice(0, stackCurrent - 1)];
panels.forEach((panel, index) => {
const img = panel.querySelector('img');
img.src = newImages[index];
img.alt = `3D堆叠卡片图片${index + 1}`;
});
}
stackNext.addEventListener('click', function() {
stackCurrent = stackCurrent === stackTotal ? 1 : stackCurrent + 1;
updateStackImages();
updateStackCounter();
});
stackPrev.addEventListener('click', function() {
stackCurrent = stackCurrent === 1 ? stackTotal : stackCurrent - 1;
updateStackImages();
updateStackCounter();
});
// 效果4: 3D翻页效果
const pageSlider = document.getElementById('pageSlider');
const pagePrev = document.getElementById('pagePrev');
const pageNext = document.getElementById('pageNext');
const pageCounter = document.getElementById('pageCounter');
let pageCurrent = 1;
let pageTotal = 2;
let pageDirection = 'down';
function updatePageCounter() {
pageCounter.textContent = `${pageCurrent} / ${pageTotal}`;
}
function flipPage() {
if (pageDirection === 'down') {
pageSlider.style.transform = 'rotateX(180deg)';
} else {
pageSlider.style.transform = 'rotateX(0deg)';
}
}
pageNext.addEventListener('click', function() {
pageDirection = 'down';
pageCurrent = pageCurrent === pageTotal ? 1 : pageCurrent + 1;
updatePageCounter();
flipPage();
});
pagePrev.addEventListener('click', function() {
pageDirection = 'up';
pageCurrent = pageCurrent === 1 ? pageTotal : pageCurrent - 1;
updatePageCounter();
flipPage();
});
// 效果5: 3D折叠效果
const foldSlider = document.getElementById('foldSlider');
const foldPrev = document.getElementById('foldPrev');
const foldNext = document.getElementById('foldNext');
const foldCounter = document.getElementById('foldCounter');
const foldPanel1 = document.getElementById('foldPanel1');
const foldPanel2 = document.getElementById('foldPanel2');
let foldCurrent = 1;
let foldTotal = 2;
let isFolding = false;
function updateFoldCounter() {
foldCounter.textContent = `${foldCurrent} / ${foldTotal}`;
}
function foldEffect() {
if (isFolding) return;
isFolding = true;
// 折叠效果
foldPanel1.style.transition = 'transform 0.5s ease';
foldPanel2.style.transition = 'transform 0.5s ease 0.2s';
foldPanel1.style.transform = 'perspective(1000px) rotateY(-45deg)';
foldPanel2.style.transform = 'perspective(1000px) rotateY(-90deg)';
setTimeout(() => {
// 切换图片
const currentSlide = foldSlider.querySelector('div:first-child');
const nextSlide = foldSlider.querySelector('div:last-child');
[currentSlide.style.opacity, nextSlide.style.opacity] =
[nextSlide.style.opacity, currentSlide.style.opacity];
// 展开效果
foldPanel1.style.transform = 'perspective(1000px) rotateY(0deg)';
foldPanel2.style.transform = 'perspective(1000px) rotateY(0deg)';
isFolding = false;
}, 700);
}
foldNext.addEventListener('click', function() {
if (isFolding) return;
foldCurrent = foldCurrent === foldTotal ? 1 : foldCurrent + 1;
updateFoldCounter();
foldEffect();
});
foldPrev.addEventListener('click', function() {
if (isFolding) return;
foldCurrent = foldCurrent === 1 ? foldTotal : foldCurrent - 1;
updateFoldCounter();
foldEffect();
});
// 初始化计数器
updateFlipCounter();
updateCarouselCounter();
updateStackCounter();
updatePageCounter();
updateFoldCounter();
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
