zoukankan      html  css  js  c++  java
  • CSS 动画 : 3D翻页动画

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>create effect of 3D</title>
        <style>
          *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
          }
          #my3d{
            /* 加入hidden 避免对其他元素造成影响 */
            overflow: hidden;
            perspective: 800px;
            perspective-origin: 50% 50%;
          }
          .page-group{
            width: 400px;
            height: 400px;
            margin: 0 auto;
            position: relative;
    
            /* 规定渲染 */
            transform-style:preserve-3d;
          }
          .page{
            width: 360px;
            height: 360px;
            padding: 20px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #333;
            color:#fff;
            font-size: 360px;
            font-weight: bold;
            position: absolute;
    
            transition: transform 1s linear;
          }
          .page1{
            transform-origin: bottom;
          }
          .page2,.page3,.page4,.page5,.page6{
            transform-origin: bottom;
            transform: rotateX(90deg);
          }
    
          #op,.think{
            display: grid;
            place-items: center;
          }
         
        </style>
      </head>
      <body>
        <div id="my3d">
          <div class="page-group">
            <div class="page page1">1</div>
            <div class="page page2">2</div>
            <div class="page page3">3</div>
            <div class="page page4">4</div>
            <div class="page page5">5</div>
            <div class="page page6">6</div>
          </div>
        </div>
        <div id="op">
          <button onclick="next()">next</button> &nbsp;&nbsp;
          <button onclick="previous()">previous</button>
        </div>
    
        <br><br>
        <hr>
        <br><br>
        
        <div class="think">
          <h4>思路</h4>
          <br>
          <p>page1一开始铺在屏幕上,其他的页面横向的铺在屏幕里面</p>
        </div>
        
    
    
        <script>
          let curIndex = 1;
          function next(){
            if(curIndex==6){
              return
            }
            let curPage = document.querySelector(".page"+curIndex);
            // 当前页面向前方 90°
            curPage.style.webkitTransform = "rotateX(-90deg)"
            curIndex++
            // 下一个页面向前 90°
            let nextPage = document.querySelector(".page"+curIndex)
            nextPage.style.webkitTransform = "rotateX(0deg)"
    
          }
          function previous(){
            if(curIndex==1){
              return
            }
            let curPage = document.querySelector(".page"+curIndex);
            // 当前页面向前方 90°
            curPage.style.webkitTransform = "rotateX(90deg)"
            curIndex--
            // 下一个页面向前 90°
            let nextPage = document.querySelector(".page"+curIndex)
            nextPage.style.webkitTransform = "rotateX(0deg)"
    
          }
        </script>
    
      </body>
    </html>

    来自 : https://www.bilibili.com/video/BV1ei4y137we?p=10

  • 相关阅读:
    ASP实现禁止从外部提交数据
    随机提取N条记录[多种数据库方法]
    创建一个带滚动条的div
    将IP最后一位替换为星号
    用PHP5写的smtp类,支持身份验证、附件、抄送、暗送
    1004
    1021
    ProcessMonitor
    悲观锁和事务处理并发冲突
    spring.net入门
  • 原文地址:https://www.cnblogs.com/500m/p/13528988.html
Copyright © 2011-2022 走看看