html图片叠,很棒的CSS3图片堆叠效果

可以通过使用CSS3中的transform属性和z-index属性来实现图片叠放的效果。以下是一个简单的示例：

HTML代码：

<div class="image-stack">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS代码：

.image-stack {
  position: relative;
}

.image-stack img {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}

.image-stack img:nth-child(1) {
  transform: translate(0, 0);
}

.image-stack img:nth-child(2) {
  transform: translate(10px, 10px);
  z-index: -2;
}

.image-stack img:nth-child(3) {
  transform: translate(20px, 20px);
  z-index: -3;
}

在这个示例中，我们使用了position属性将.image-stack元素设置为相对定位，这样它的子元素（即图片）可以使用绝对定位。然后，我们使用z-index属性来控制每个图片的层叠顺序，使后面的图片覆盖在前面的图片上面。最后，我们使用transform属性来移动每个图片的位置，从而创建叠放的效果。