html旋转相册源代码

HTML旋转相册是一种常见的图片展示方式，通过CSS3的transform属性来实现旋转效果。其源代码可以通过以下步骤实现：

1. 创建一个div元素，用来包裹图片。
2. 在CSS中设置该div的宽度、高度和背景色。
3. 将图片作为div的背景图，并将background-size属性设置为cover，使图片自适应div大小。
4. 设置div的transform-origin属性为“center center”，使其以中心点为旋转点。
5. 通过设置动画样式实现旋转效果。例如，可以设置transform属性从0度到360度的变化，并设置动画时长和动画类型。

下面是一个简单的HTML旋转相册源代码示例：

HTML代码：

<div class="album">
  <div class="photo"></div>
</div>

CSS代码：

.album {
  width: 300px;
  height: 300px;
  background-color: #ccc;
  position: relative;
}
.photo {
  width: 100%;
  height: 100%;
  background-image: url('photo.jpg');
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  animation: rotate 10s infinite linear;
  transform-origin: center center;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}