使用 javascript 和 css 实现点击翻书页的效果

如何在使用 JavaScript 和 CSS 实现点击翻书页的效果时遇到问题？

问题描述：

当点击书本封面时，书籍图片消失。当翻到背面时，呈现的是书的封面而不是背面。需要实现正常翻页效果，点击不消失图片，翻到背面时是其背面而不是封面。

解决方案：

立即学习“Java免费学习笔记（深入）”；

检查 JavaScript 代码中是否存在以下错误：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

s[i].querySelector('img').style.display = 'none';

这行代码会将点击的页面的图片隐藏起来。修改为以下内容：

s[i].querySelector('img').style.display = 'block';

修改后的代码：

b.onclick = function () {
    if (i > 0) {
        s[i].style.transform = 'rotateY(-150deg)';
        s[i].style.transition = '3s';
        i--;
    }
};
c.onclick = function () {
    for (var j = 1; j < 6; j++) {
        s[j].style.transform = 'rotateY(0deg)';
        s[j].style.transition = '3s';
        s[j].querySelector('img').style.display = 'block';
    }
};

效果预览：

点击链接查看效果：

[https://link.segmentfault.com/?enc=dlk6Wb5OLCTVS%2BJm4KT4DQ%3D%3D.0fZfdL3KTe4bGziWFnZ53evwBTzL2q6mGrxjjKjguGM%3D](https://www.layui.com/demo/)

需要注意：

• 确保所有图片的尺寸相同，否则翻页时会产生图像错位的问题。
• 根据需要调整书籍的 transform 值，以获得最佳翻页效果。