<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 3D 产品展示厅</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
overflow: hidden;
perspective: 1200px;
}
.container {
position: relative;
width: 100%;
max-width: 1200px;
height: 80vh;
}
/* 3D场景容器 */
.showroom {
position: absolute;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 1.5s cubic-bezier(0.17, 0.67, 0.83, 0.67);
}
/* 控制面板 */
.controls {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 15px;
z-index: 100;
background: rgba(0, 0, 0, 0.7);
padding: 15px 25px;
border-radius: 30px;
backdrop-filter: blur(5px);
}
.control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 2px solid rgba(255, 255, 255, 0.4);
color: white;
font-size: 1.5rem;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s;
}
.control-btn:hover {
background: rgba(255, 255, 255, 0.3);
transform: scale(1.1);
}
/* 3D产品展示墙 */
.wall {
position: absolute;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.15);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
backdrop-filter: blur(10px);
transform-style: preserve-3d;
transition: transform 0.5s, box-shadow 0.5s;
}
.wall:hover {
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.7);
transform: translateZ(30px);
}
/* 定位各墙面 */
.front-wall {
transform: translateZ(300px);
}
.back-wall {
transform: translateZ(-300px) rotateY(180deg);
}
.left-wall {
transform: translateX(-300px) rotateY(-90deg);
}
.right-wall {
transform: translateX(300px) rotateY(90deg);
}
.top-wall {
transform: translateY(-300px) rotateX(90deg);
}
.bottom-wall {
transform: translateY(300px) rotateX(-90deg);
}
/* 产品样式 */
.product {
width: 100%;
height: 200px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin-bottom: 20px;
transform-style: preserve-3d;
transform: translateZ(20px);
}
.product-title {
color: white;
font-size: 1.8rem;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.product-desc {
color: rgba(255, 255, 255, 0.8);
text-align: center;
font-size: 1rem;
line-height: 1.5;
max-width: 80%;
}
/* 中心信息 */
.center-info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) translateZ(0);
text-align: center;
color: white;
z-index: 50;
pointer-events: none;
}
.center-title {
font-size: 3rem;
font-weight: 800;
margin-bottom: 20px;
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.7);
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.center-subtitle {
font-size: 1.2rem;
max-width: 500px;
opacity: 0.9;
line-height: 1.6;
}
/* 3D 悬浮粒子 */
.particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
}
.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
transform-style: preserve-3d;
}
/* 响应式设计 */
@media (max-width: 768px) {
.controls {
flex-wrap: wrap;
width: 90%;
justify-content: center;
}
.wall {
width: 220px;
height: 320px;
}
.front-wall { transform: translateZ(200px); }
.back-wall { transform: translateZ(-200px) rotateY(180deg); }
.left-wall { transform: translateX(-200px) rotateY(-90deg); }
.right-wall { transform: translateX(200px) rotateY(90deg); }
.top-wall { transform: translateY(-200px) rotateX(90deg); }
.bottom-wall { transform: translateY(200px) rotateX(-90deg); }
}
</style>
</head>
<body>
<div class="container">
<div class="showroom" id="showroom">
<!-- 3D 墙面 -->
<div class="wall front-wall">
<div class="product" style="background-image: url('https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80')"></div>
<h3 class="product-title">智能手表</h3>
<p class="product-desc">全天健康监测，超长续航</p>
</div>
<div class="wall back-wall">
<div class="product" style="background-image: url('https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80')"></div>
<h3 class="product-title">无线耳机</h3>
<p class="product-desc">主动降噪，沉浸式音效</p>
</div>
<div class="wall left-wall">
<div class="product" style="background-image: url('https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80')"></div>
<h3 class="product-title">智能家居</h3>
<p class="product-desc">语音控制，智能生活</p>
</div>
<div class="wall right-wall">
<div class="product" style="background-image: url('https://images.unsplash.com/photo-1541807084-5c52b6b3adef?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80')"></div>
<h3 class="product-title">平板电脑</h3>
<p class="product-desc">超清屏幕，强劲性能</p>
</div>
<div class="wall top-wall">
<div class="product" style="background-image: url('https://images.unsplash.com/photo-1585155770447-2f66e2a397b5?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80')"></div>
<h3 class="product-title">游戏主机</h3>
<p class="product-desc">4K游戏体验，沉浸式娱乐</p>
</div>
<div class="wall bottom-wall">
<div class="product" style="background-image: url('https://images.unsplash.com/photo-1607853554439-0069ec0ecb0f?ixlib=rb-4.0.3&auto=format&fit=crop&w=400&q=80')"></div>
<h3 class="product-title">智能相机</h3>
<p class="product-desc">专业影像，智能拍摄</p>
</div>
<!-- 中心信息 -->
<div class="center-info">
<h1 class="center-title">3D 产品展示厅</h1>
<p class="center-subtitle">使用CSS 3D Transform技术创建的沉浸式产品展示空间，点击下方按钮旋转查看</p>
</div>
<!-- 3D粒子效果 -->
<div class="particles" id="particles"></div>
</div>
<!-- 控制面板 -->
<div class="controls">
<button class="control-btn" id="rotateLeft">↩️</button>
<button class="control-btn" id="rotateRight">↪️</button>
<button class="control-btn" id="rotateUp">⬆️</button>
<button class="control-btn" id="rotateDown">⬇️</button>
<button class="control-btn" id="reset">🔄</button>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const showroom = document.getElementById('showroom');
let rotationX = 0;
let rotationY = 0;
// 控制按钮事件
document.getElementById('rotateLeft').addEventListener('click', () => {
rotationY += 90;
updateRotation();
});
document.getElementById('rotateRight').addEventListener('click', () => {
rotationY -= 90;
updateRotation();
});
document.getElementById('rotateUp').addEventListener('click', () => {
rotationX += 90;
updateRotation();
});
document.getElementById('rotateDown').addEventListener('click', () => {
rotationX -= 90;
updateRotation();
});
document.getElementById('reset').addEventListener('click', () => {
rotationX = 0;
rotationY = 0;
updateRotation();
});
// 更新旋转
function updateRotation() {
showroom.style.transform = `rotateX(${rotationX}deg) rotateY(${rotationY}deg)`;
}
// 创建3D粒子效果
const particlesContainer = document.getElementById('particles');
const particleCount = 100;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.classList.add('particle');
// 随机位置
const posX = Math.random() * 100;
const posY = Math.random() * 100;
const posZ = (Math.random() - 0.5) * 2000;
// 随机大小
const size = Math.random() * 10 + 2;
// 随机透明度
const opacity = Math.random() * 0.5 + 0.1;
// 随机颜色
const colors = [
'rgba(255, 100, 100, OPACITY)',
'rgba(100, 255, 100, OPACITY)',
'rgba(100, 100, 255, OPACITY)',
'rgba(255, 255, 100, OPACITY)',
'rgba(100, 255, 255, OPACITY)'
];
const color = colors[Math.floor(Math.random() * colors.length)].replace('OPACITY', opacity);
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.background = color;
particle.style.left = `${posX}%`;
particle.style.top = `${posY}%`;
particle.style.transform = `translate3d(0, 0, ${posZ}px)`;
particlesContainer.appendChild(particle);
}
// 添加键盘控制
document.addEventListener('keydown', (e) => {
switch(e.key) {
case 'ArrowLeft':
rotationY += 5;
break;
case 'ArrowRight':
rotationY -= 5;
break;
case 'ArrowUp':
rotationX += 5;
break;
case 'ArrowDown':
rotationX -= 5;
break;
case ' ':
rotationX = 0;
rotationY = 0;
break;
default:
return;
}
updateRotation();
});
});
</script>
</body>
</html>
浙公网安备 33010602011771号