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);
.........完整代码请登录后点击上方下载按钮下载查看