css3实现翻书特效

最新推荐文章于 2023-09-05 15:50:11 发布

亦双城的双子娴

最新推荐文章于 2023-09-05 15:50:11 发布

阅读量924

点赞数 1

文章标签： css3

本文链接：https://blog.csdn.net/qq_39285178/article/details/121161797

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body {
        background-color: #ccc;
    }
    .book {
        width: 400px;
        height: 600px;
        margin:100px auto 50px;
        transform-style: preserve-3d;
        /* 近大远小效果 */
        perspective: 1200px;
        /* position: relative; */
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    #page1,#page2,#page3,#page4,#page5,#page6,#page7,#page8,#page9{

        position: relative;
        transition: all .5s;
        transform-origin: left;
        transform-style: preserve-3d;
        left:0;
        top:0;
    }
    #page1 {
        z-index: 9; 
    }
    #page2{
        z-index: 8;
    }   
    #page3{
        z-index: 7;
    }   
    #page4{
        z-index: 6;
    }   
    #page5 {
        z-index: 5; 
    }
    #page6{
        z-index: 4;
    }   
    #page7{
        z-index: 3;
    }   
    #page8{
        z-index: 2;
    }   
    #page9{
        z-index: 1;
    }   
    .page-front {
        position: absolute;
        background-color: greenyellow;
        left: 0;
        top:0;
        width: 400px;
        height: 600px;
        border:8px solid #fff;
        box-sizing: border-box;
        font-size: 28px;
        line-height: 300px;
        text-align: center;
        backface-visibility: hidden;
        
    }
    .page-back {
        width: 400px;
        height: 600px;
        box-sizing: border-box;
        border:8px solid #fff;
        position: absolute;
        background-color: #EEE;
        left: 0;
        top:0; 
    }
    .class-group-btn {  
      display: flex;
      width: 200px;
      justify-content: space-between;
      margin:auto;
  }
  .class-group-btn>div{
      overflow: hidden;
      width: 200px;
      position: relative;
      background: lightpink;
      height: 60px;
      line-height: 60px;
      text-align: center;
      transition: all .5s;
  }
  .class-group-btn>div:hover {
      background-color: #fff;
  }
  .class-group-btn>div:hover a {
      color:purple;
  }
  .class-group-btn>div:hover .border-top {
      right: 0px;
  }
  .class-group-btn>div:hover .border-bottom {
      left: 0px;
  }
  .class-group-btn>div>a {
      text-decoration: none;
      color: dodgerblue;
      font-size: 28px;
  }
  .border-top {
      position: absolute;
      background-color: greenyellow;
      top:0px;
      right:-200px;
      height: 8px;
      width: 200px; 
      transition: all .5s;
  }
  .border-bottom {
      position: absolute;
      background-color: greenyellow;
      transition: all .5s;
      bottom:0px;
      height: 8px;
      left: -200px;
      width: 200px;  
  }
</style>
<body>
    <div class="book">
        <div id="page1"> 
            <div class="page-back"></div>
            <div class="page-front">
                HTML5
            </div>
        </div>
        <div id="page2"> 
            <div class="page-back"></div>
            <div class="page-front">CSS3</div>
        </div>
        <div id="page3"> 
            <div class="page-back"></div>
            <div class="page-front">JAVASCRIPT</div>
        </div>
        <div id="page4"> 
            <div class="page-back"></div>
            <div class="page-front">JAVAEE</div>
        </div>
        <div id="page5"> 
            <div class="page-back"></div>
            <div class="page-front">ORACLE</div>
        </div>
        <div id="page6"> 
            <div class="page-back"></div>
            <div class="page-front">SQLSERVER</div>
        </div>
        <div id="page7"> 
            <div class="page-back"></div>
            <div class="page-front">SOLR</div>
        </div>
        <div id="page8"> 
            <div class="page-back"></div>
            <div class="page-front">MONGDB</div>
        </div>
        <div id="page9"> 
            <div class="page-back"></div>
            <div class="page-front">LINUX</div>
        </div>
    </div>
    <div class="class-group-btn">
        <div>
            <div class="border-top"></div>
            <a href="#" class="clickme">点我翻页</a>
            <div class="border-bottom"></div>
        </div>
        <!-- <div>
            <div class="border-top"></div>
            <a href="javascript(0)">HTML5</a>
            <div class="border-bottom"></div>
        </div>
        <div>
            <div class="border-top"></div>
            <a href="javascript(0)">JAVASCRIPT</a>
            <div class="border-bottom"></div>
        </div> -->

    </div>
</body>
<script>
    var book = document.querySelector('.clickme')
    var index = 0
    var pagedom = document.querySelectorAll("[id^='page']")
    book.onclick = function(){
        if(index < pagedom.length -1 ){
            pagedom[index].style.transform = "rotateY(-145deg)";
            index++
        } else {
            // 
            for (let i = 0; i < pagedom.length; i++) {
                // setTimeout(_=>{
                    pagedom[i].style.transform = "rotateY(0deg)";
                // },i*100)
                
            }
            index = 0
        }
    }
</script>
</html>

亦双城的双子娴

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3实现翻书特效

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
复制链接

扫一扫