html的div内换页,切换两个div的翻页效果

可以使用CSS3的动画效果来实现两个div的翻页效果。具体实现方法如下：

1.在HTML中定义两个div，分别用于显示不同的内容。

<div class="page1">
  <!-- 第一页内容 -->
</div>

<div class="page2">
  <!-- 第二页内容 -->
</div>

2.使用CSS3定义动画效果，实现两个div的切换。

.page1 {
  animation: page1 1s forwards;
}

.page2 {
  animation: page2 1s forwards;
}

@keyframes page1 {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-180deg);
  }
}

@keyframes page2 {
  from {
    transform: rotateY(180deg);
  }
  to {
    transform: rotateY(0deg);
  }
}

3.使用JavaScript控制两个div的显示和隐藏。

var page1 = document.querySelector('.page1');
var page2 = document.querySelector('.page2');

// 点击按钮显示第二页
document.querySelector('.btn').addEventListener('click', function() {
  page1.style.display = 'none';
  page2.style.display = 'block';
});

// 点击按钮显示第一页
document.querySelector('.btn-back').addEventListener('click', function() {
  page1.style.display = 'block';
  page2.style.display = 'none';
});

这样就可以实现两个div的翻页效果了。当点击按钮时，第一个div会旋转到背面隐藏，同时第二个div会从背面旋转过来显示。当点击返回按钮时，两个div会反向旋转到原来的位置。