我想在颤动中显示多页之间的间隙

<div class="page-container">
  <div class="page">页面1</div>
  <div class="page">页面2</div>
  <div class="page">页面3</div>
  <!-- 其他页面 -->
</div>

.page-container {
  position: relative;
  height: 400px; /* 设置容器的高度 */
  width: 100%; /* 设置容器的宽度 */
  overflow: hidden; /* 隐藏超出容器范围的内容 */
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease-in-out; /* 使用过渡效果实现颤动 */
}

// JavaScript 示例代码
const pages = document.querySelectorAll('.page');
let currentPage = 0;

function showPage(index) {
  // 隐藏当前页面
  pages[currentPage].style.transform = 'translateX(-100%)';
  
  // 显示下一个页面
  pages[index].style.transform = 'translateX(0)';
  
  currentPage = index;
}

// 点击按钮切换到下一页
document.getElementById('next-btn').addEventListener('click', () => {
  const nextPage = (currentPage + 1) % pages.length;
  showPage(nextPage);
});