使用js和css实现点击翻书页的效果有问题，请问？

发布于 2022-09-30 23:09:11 字数 4079 浏览 26 评论 0

如图，上图为封面图

这张图为点击封面后的图，图片消失了

这张是第一页的图

一点击它的图片也消失了

然后翻到左边，它的背面却有封面的图
请问该如何实现正常的翻页效果，点击不消失图片，翻到背面时是它的背面，而不像是现在这样是封面图的封面，请指教。不胜感激。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3翻书效果</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body,html {
                height: 100%;
            }
            li{
                list-style: none;
            }
            body {
                -webkit-perspective: 2000px;
                -moz-perspective: 2000px;
                -ms-perspective: 2000px;
                perspective: 2000px;
                background-color: #212121;
            }
            .book {
                position: absolute;
                top: 30%;
                left: 40%;
                width: 500px;
                height: 500px;
                background-color: #fff;
                -webkit-transform: rotateX(30deg);
                -ms-transform: rotateX(30deg);
                -o-transform: rotateX(30deg);
                transform: rotateX(30deg);
            }
            /*开3D效果*/
            .pre-3d {               
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 500px;
                height: 500px;
                border: 1px solid #1976D2;
                text-align: center;
                -webkit-transform-origin: 0 50%;
                -moz-transform-origin: 0 50%;
                -ms-transform-origin: 0 50%;
                -o-transform-origin: 0 50%;
                transform-origin: 0 50%;
            }
            .front1 {
                background-color: paleturquoise;
            }
            .front2 {
                background-color: goldenrod;
            }   
            img{
                width: 100%;
                height: 100%;
            }       
        </style>
    </head>
    <body>
        <div class="book pre-3d" id="book">
            <!-- 后封面 -->
            <ul>
            <li class="" id="Rcover">ddds<img src="img/44.jpg" alt=""></li>
            <!-- 书页 -->
            <li class="pre-3d  page front2">sssss<img src="img/22.jpg" alt=""></li>
            <li class="pre-3d  page front2">ddfdf<img src="img/22.jpg" alt=""></li>
            <li class="pre-3d  page front2">第二页<img src="img/22.jpg" alt=""></li>
            <li class="pre-3d  page front2">第一页<img src="img/33.jpg" alt=""></li>
            <!-- 书的封面 -->
            <li class="pre-3d  page front1">封面<img src="img/44.jpg" alt=""></li>
            </ul>
        </div>
   </body>
<script>
    var b=document.getElementById('book');
    var s=document.getElementsByTagName('li');
    var c=document.getElementById('Rcover');
    var i=5;
    b.onclick=function(){
        if(i>0){
            s[i].style.transform='rotateY(-150deg)';
            s[i].style.transition='3s';
 s[i].querySelector('img').style.display = 'none';
            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';
      
       }
    }
</script>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

白衬杉格子梦 2022-10-07 23:09:11

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3翻书效果</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body,html {
                height: 100%;
            }
            li{
                list-style: none;
            }
            body {
                -webkit-perspective: 2000px;
                -moz-perspective: 2000px;
                -ms-perspective: 2000px;
                perspective: 2000px;
                background-color: #212121;
            }
            .book {
                position: absolute;
                top: 30%;
                left: 40%;
                width: 500px;
                height: 500px;
                background-color: #fff;
                -webkit-transform: rotateX(30deg);
                -ms-transform: rotateX(30deg);
                -o-transform: rotateX(30deg);
                transform: rotateX(30deg);
            }
            /*开3D效果*/
            .pre-3d {               
                -webkit-transform-style: preserve-3d;
                -moz-transform-style: preserve-3d;
                -ms-transform-style: preserve-3d;
                transform-style: preserve-3d;
            }
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 500px;
                height: 500px;
                border: 1px solid #1976D2;
                text-align: center;
                -webkit-transform-origin: 0 50%;
                -moz-transform-origin: 0 50%;
                -ms-transform-origin: 0 50%;
                -o-transform-origin: 0 50%;
                transform-origin: 0 50%;
            }
            .front1 {
                background-color: paleturquoise;
            }
            .front2 {
                background-color: goldenrod;
            }   
            img{
                width: 100%;
                height: 100%;
            }       
        </style>
    </head>
    <body>
        <div class="book pre-3d" id="book">
            <!-- 后封面 -->
            <ul>
            <li class="" id="Rcover">ddds<img src="img/44.jpg" alt=""></li>
            <!-- 书页 -->
            <li class="pre-3d  page front2">sssss<img src="img/22.jpg" alt=""></li>
            <li class="pre-3d  page front2">ddfdf<img src="img/22.jpg" alt=""></li>
            <li class="pre-3d  page front2">ssdf<img src="img/22.jpg" alt=""></li>
            <li class="pre-3d  page front2">sddd<img src="https://image-static.segmentfault.com/423/077/4230770021-6141f78407e79_fix732" alt=""></li>
            <!-- 书的封面 -->
            <li class="pre-3d  page front1"><img src="https://image-static.segmentfault.com/369/227/369227196-6141f77c8dced_fix732" alt=""></li>
            </ul>
        </div>
   </body>
<script>
    var b=document.getElementById('book');
    var s=document.getElementsByTagName('li');
    var c=document.getElementById('Rcover');
    var i=5;
    b.onclick=function(){
        if(i>0){
            s[i].style.transform='rotateY(-150deg)';
            s[i].style.transition='3s';
 s[i].querySelector('img').style.display = 'none';
            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';
      
       }
    }
</script>
</html>

测试地址
https://www.layui.com/demo/

回复收藏 0

污味仙女 2022-10-07 23:09:11

处理一下z-index就好了
https://codepen.io/cuteyangya...

是要这样的效果吗，代码问题有点多，是的话我再跟你说要怎么改，不是就算了，没空再看~~

回复收藏 0

尴尬癌患者 2022-10-07 23:09:11

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>CSS3翻书效果</title>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0;
            }
            body,
            html {
                height: 100%;
            }
            li {
                list-style: none;
                transition: transform 3s;
            }
            body {
                perspective: 2000px;
                background-color: #212121;
            }
            .book {
                margin-top: 200px;
                position: relative;
                margin-left: 500px;
                width: 500px;
                height: 500px;
                transform: rotateX(30deg);
                background-color: #fff;
            }
            /*开3D效果*/
            .pre-3d {
                transform-style: preserve-3d;
            }
            .page {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                transform-origin: 0 50%;
                /* transform: rotateX(0deg) rotateY(0deg); */
                border: 1px solid #1976d2;
                text-align: center;
            }
            .front1 {
                background-color: paleturquoise;
            }
            .front2 {
                background-color: goldenrod;
            }
            img {
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <ul class="book pre-3d" id="book">
            <li class="">6<img src="https://i.loli.net/2021/09/16/OUYR4JBGvwIN96V.jpg" alt="" /></li>
            <li class="pre-3d page front2">5<img src="https://i.loli.net/2021/09/16/6pwyWdDxrlCKPqR.jpg" alt="" /></li>
            <li class="pre-3d page front2">4<img src="https://i.loli.net/2021/09/16/unVSedITc8vyQGf.jpg" alt="" /></li>
            <li class="pre-3d page front2">3<img src="https://i.loli.net/2021/09/16/ZN3woeJ6BdQ7lbV.jpg" alt="" /></li>
            <li class="pre-3d page front2">2<img src="https://i.loli.net/2021/09/16/HXYhczlBO1dfFKC.jpg" alt="" /></li>
            <li class="pre-3d page front1">1<img src="https://i.loli.net/2021/09/16/zDIraLYqNbQAxBP.jpg" alt="" /></li>
        </ul>
    </body>
    <script>
        var b = document.getElementById("book");
        var s = document.getElementsByTagName("li");
        var i = s.length - 1;
        let zIndex = 0;
        b.onclick = function () {
            if (i) {
                s[i].style.transform = "rotateX(0deg) rotateY(-150deg)";
                s[i].style.zIndex = zIndex;
                zIndex++;
                i--;
            } else {
                for (var j = 1; j < 6; j++) {
                    s[j].removeAttribute("style");
                }
                zIndex = 0;
                i = s.length - 1;
            }
        };
    </script>
</html>

回复收藏 0

~没有更多了~