html旋转相册

要制作一个HTML旋转相册，可以使用CSS3的transform属性和transition属性，以及JavaScript控制旋转的角度和图片的位置。

1. HTML结构

首先需要在HTML中创建一个包含所有图片的容器，然后在容器中创建img元素来加载图片。

<div class="carousel-container">
  <img src="image1.jpg" alt="image1">
  <img src="image2.jpg" alt="image2">
  <img src="image3.jpg" alt="image3">
  <img src="image4.jpg" alt="image4">
  <img src="image5.jpg" alt="image5">
</div>

2. CSS样式

为了让图片在容器中水平居中并且可以旋转，需要使用CSS3的transform属性和transition属性。另外为了避免图片重叠，需要设置图片的绝对定位和旋转中心点。

.carousel-container {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
  perspective: 1000px;
}
.carousel-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  transform-origin: center center;
  transition: transform 1s;
}

3. JavaScript代码

为了控制图片的旋转角度和位置，需要使用JavaScript。首先需要获取所有的图片元素，然后计算每张图片的旋转角度和位置，最后通过修改每张图片的transform属性来实现旋转。

var carousel = document.querySelector('.carousel-container');
var images = carousel.querySelectorAll('img');
var angle = 0;
var radius = 200;
var imageWidth = 150;
var imageHeight = 100;
var total = images.length;

function rotateCarousel() {
  var increment = 360 / total;
  for (var i = 0; i < total; i++) {
    var image = images[i];
    var angleInRadians = angle * Math.PI / 180;
    var x = radius * Math.sin(angleInRadians);
    var z = radius * Math.cos(angleInRadians);
    var transform = 'translateX(' + (-imageWidth / 2) + 'px) translateY(' + (-imageHeight / 2) + 'px) translateZ(' + z + 'px) rotateY(' + (-angle) + 'deg)';
    image.style.transform = transform;
    angle += increment;
  }
}

rotateCarousel();

setInterval(function() {
  angle += 0.5;
  rotateCarousel();
}, 10);

以上是一个简单的HTML旋转相册的实现，您可以根据自己的需求进行修改和扩展。