3D 特效旋转相册：让你的回忆动起来！

2023-09-16 07:59:47

想让你的照片在屏幕上跳动起来吗？3D 特效旋转相册就是你需要的魔法秘诀！让我们使用 CSS3 的 transform-style 属性，踏上创造一个令人惊叹的动态相册之旅吧。

了解 transform-style 属性

transform-style 属性定义了在应用 2D 或 3D 转换时如何处理元素及其子元素。对于我们的 3D 相册，我们将使用它来指定子元素应该如何旋转。

创建相册容器

我们的相册将是一个容器，其中包含一张张的图片。我们可以使用一个 div 元素来创建容器，并使用 CSS 来设置其样式：

#photo-container {
  width: 600px;
  height: 400px;
  perspective: 1000px;
}

width 和 height 属性定义了相册的大小。
perspective 属性指定了透视效果的视点距离，单位为像素。较大的值会产生更强烈的 3D 效果。

添加图片

现在，让我们将图片添加到我们的相册中。我们将使用 ul 和 li 元素来创建列表：

<ul id="photos">
  <li><img src="image1.jpg" alt="Image 1"></li>
  <li><img src="image2.jpg" alt="Image 2"></li>
  <li><img src="image3.jpg" alt="Image 3"></li>
</ul>

将 li 元素的 display 属性设置为 inline-block，使它们并排显示。
使用 transform-style: preserve-3d;，使图片保持 3D 效果。

#photos {
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
}

#photos li {
  display: inline-block;
  margin: 10px;
  transform-origin: center;
}

旋转图片

要旋转图片，我们可以使用 transform: rotateY() 属性。它接受旋转角度作为参数，单位为度数。例如，将第一个图片旋转 30 度：

#photos li:first-child {
  transform: rotateY(30deg);
}

悬停效果

我们可以添加一个悬停效果，当用户将鼠标悬停在图片上时，图片会旋转得更快。

#photos li:hover {
  animation: spin 5s infinite linear;
}

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}