3D 环形旋转图片轮播（纯html,css,js）

原创于 2025-08-21 15:44:48 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

html、css 专栏收录该内容

6 篇文章

订阅专栏

<!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>