CSS3技巧37：JS+CSS3 制作旋转图片墙

以下是一个使用JavaScript和CSS3制作旋转图片墙的简单示例：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rotating Image Wall</title>
<style>
  .container {
    perspective: 1000px;
  }
  .image-wall {
    position: relative;
    width: 200px;
    height: 200px;
    transform-style: preserve-3d;
    animation: rotate 5s infinite linear;
  }
  .image-wall img {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  @keyframes rotate {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
</style>
</head>
<body>
<div class="container">
  <div class="image-wall">
    <img src="image1.jpg">
    <img src="image2.jpg">
    <img src="image3.jpg">
    <img src="image4.jpg">
    <img src="image5.jpg">
    <img src="image6.jpg">
  </div>
</div>
<script>
  const imageWall = document.querySelector('.image-wall');
  const images = Array.from(document.querySelectorAll('img'));
 
  function cloneImages() {
    images.forEach((img, index) => {
      const clone = img.cloneNode();
      clone.style.position = 'absolute';
      clone.style.zIndex = images.length - index;
      imageWall.appendChild(clone);
    });
  }
 
  function calculateRotation() {
    const angle = 360 / images.length;
    images.forEach((img, index) => {
      img.style.transform = `rotateY(${angle * index}deg) translateZ(200px)`;
    });
  }
 
  cloneImages();
  calculateRotation();
</script>
</body>
</html>

在这个示例中，我们创建了一个包含6张图片的图片墙，通过CSS3的3D转换和动画来实现它们的旋转。JavaScript用于克隆图片并计算每个图片的旋转角度。注意，为了使旋转更加真实，每个图片需要是一个独立的元素，这样它们才能独立地旋转。

CSS3技巧37：JS+CSS3 制作旋转图片墙

评论已关闭

推荐阅读