<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>3D 环形旋转图片</title><style>body {margin: 0;height: 100vh;display: flex;align-items: center;justify-content: center;background: radial-gradient(circle at center, #111, #000);overflow: hidden;}.carousel {width: 400px;height: 300px;perspective: 1500px;}.ring {width: 100%;height: 100%;position: relative;transform-style: preserve-3d;animation: rotate 30s linear infinite;}.card {position: absolute;width: 280px;height: 200px;border-radius: 12px;overflow: hidden;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255,255,255,0.1);transition: transform 0.3s, box-shadow 0.3s;}.card img {width: 100%;height: 100%;object-fit: cover;display: block;}.card:hover {transform: scale(1.05) translateZ(500px);box-shadow: 0 20px 40px rgba(255, 255, 255, 0.4);}@keyframes rotate {from { transform: rotateY(0deg); }to { transform: rotateY(-360deg); }}</style>
</head>
<body><div class="carousel"><div class="ring" id="ring"></div></div><script>const ring = document.getElementById("ring");const numCards = 8; const angle = 360 / numCards;const images = ["https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg","https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg","https://images.pexels.com/photos/34950/pexels-photo.jpg","https://images.pexels.com/photos/459225/pexels-photo-459225.jpeg","https://images.pexels.com/photos/207962/pexels-photo-207962.jpeg","https://images.pexels.com/photos/356378/pexels-photo-356378.jpeg","https://images.pexels.com/photos/158607/cairn-fog-mystical-background-158607.jpeg","https://images.pexels.com/photos/236047/pexels-photo-236047.jpeg"
];for (let i = 0; i < numCards; i++) {const card = document.createElement("div");card.className = "card";card.style.transform = `rotateY(${i * angle}deg) translateZ(500px)`;const img = document.createElement("img");img.src = images[i];card.appendChild(img);ring.appendChild(card);}</script>
</body>
</html>
