css+js实现自适应绿皮书籍书本点击翻书效果代码-html代码-BFW代码库

css+js实现自适应绿皮书籍书本点击翻书效果代码

代码语言：html

所属分类：其他

代码描述：css+js实现自适应绿皮书籍书本点击翻书效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">






    <style>
        @import url("https://fonts.googleapis.com/css2?family=Alice&display=swap");
        :root {
          --rotate-A: 0deg;
          --rotate-B: 0deg;
          --rotate-C: 0deg;
          --translate: 50%;
          --z-index-A: 10;
          --z-index-B: 5;
          --z-index-C: 1;
          --cover-color: hsl(150deg, 100%, 15%);
          --page-first-color: hsl(36, 48%, 80%);
          --page-second-color: hsl(36, 48%, 70%);
          --page-last-color: hsl(36, 48%, 25%);
        }
        
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        .book-container {
          min-height: 100vh;
          width: 100vw;
          background: radial-gradient(circle at center, black, #1a1a1a);
          display: grid;
          place-content: center;
          overflow: hidden;
        }
        
        .book {
          position: relative;
          width: min(100vw, 1000px);
          height: min(60vw, 600px);
          perspective: min(300vw, 3000px);
        }
        
        .page-container {
          position: absolute;
          height: inherit;
          width: min(50vw, 500px);
          cursor: pointer;
          transition: 0.5s transform ease-in-out;
          transform-style: preserve-3d;
          transform-origin: left;
        }
        
        .page-A {
          transform: translate(var(--translate)) rotateY(var(--rotate-A));
          z-index: var(--z-index-A);
        }
        
        .page-B {
          transform: translate(var(--translate)) rotateY(var(--rotate-B));
          z-index: var(--z-index-B);
        }
        
        .page-C {
          transform: translate(var(--translate)) rotateY(var(--rotate-C));
          z-index: var(--z-index-C);
        }
        
        .page {
          position: absolute;
          backface-visibility: hidden;
          height: inherit;
          width: inherit;
          padding: min(10px, 1vw) min(15px, 1.5vw);
        }
        
        .front {
          border-radius: 5px 15px 15px 5px;
        }
        
        .back {
          border-radius: 15px 5px 5px 15px;
          transform: rotateY(180deg);
        }
        
        .page-A-front,
        .page-C-back {
          background: var(--cover-color);
          background-image: url("//repo.bfw.wiki/bfwrepo/icon/61a570f2a8241.png");
          background-size: contain;
          background-repeat: no-repeat;
        }
        
        .page-A-front {
          font-family: "Alice", serif;
          color: #ffcc00;
        }
        .page-A-front * {
          display: inline-block;
          position: absolute;
          text-align: center;
        }
        .page-A-front h1 {
          font-size: min(56px, 5.6vw);
          display: inline-block.........完整代码请登录后点击上方下载按钮下载查看