如何创建集合视图的堆叠视图效果？

<div class="stacked-views">
  <div class="view">View 1</div>
  <div class="view">View 2</div>
  <div class="view">View 3</div>
  <!-- 添加更多视图 -->
</div>

.stacked-views {
  position: relative;
}

.view {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
  z-index: 1;
}

// 使用JavaScript控制堆叠效果
const views = document.querySelectorAll('.view');
views.forEach((view, index) => {
  view.style.transform = `translate(${index * 10}px, ${index * 10}px)`;
});

// 使用CSS动画控制堆叠效果
@keyframes stack-animation {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(10px, 10px);
  }
}

.view {
  animation: stack-animation 1s ease-in-out infinite alternate;
}