3D-Folder-Animation/index.html at main · BintScripts/3D-Folder-Animation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Folder with @BintScripts Logo Inside</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body class="bg-white text-black flex items-center justify-center min-h-screen">
  <section class="relative group flex flex-col items-center justify-center w-full h-full">
    <div class="file relative w-60 h-40 cursor-pointer origin-bottom [perspective:1500px] z-50">
      <div class="work-5 bg-zinc-800 w-full h-full origin-top rounded-2xl rounded-tl-none
                  group-hover:shadow-[0_20px_40px_rgba(0,0,0,.2)] transition-all ease duration-300 relative
                  after:absolute after:content-[''] after:bottom-[99%] after:left-0 after:w-20 after:h-4
                  after:bg-zinc-800 after:rounded-t-2xl
                  before:absolute before:content-[''] before:-top-[15px] before:left-[75.5px]
                  before:w-4 before:h-4 before:bg-zinc-800
                  before:[clip-path:polygon(0_35%,0%_100%,50%_100%);]">
        <span class="front-logo">@BintScripts</span>
      </div>
      <div class="work-4 paper-layer paper-1 group-hover:[transform:rotateX(-15deg)]">
        <span class="inside-logo">@BintScripts</span>
      </div>
      <div class="work-3 paper-layer paper-2 group-hover:[transform:rotateX(-25deg)]"></div>
      <div class="work-2 paper-layer paper-3 group-hover:[transform:rotateX(-35deg)]"></div>
      <div class="work-1 absolute bottom-0 bg-gradient-to-t from-zinc-800 to-zinc-600
                 w-full h-[156px] rounded-2xl rounded-tr-none
                 after:absolute after:content-[''] after:bottom-[99%] after:right-0
                 after:w-[146px] after:h-[16px] after:bg-zinc-600 after:rounded-t-2xl
                 before:absolute before:content-[''] before:-top-[10px] before:right-[142px]
                 before:size-3 before:bg-zinc-600
                 before:[clip-path:polygon(100%_14%,50%_100%,100%_100%);]
                 transition-all ease duration-300 origin-bottom flex items-end
                 group-hover:shadow-[inset_0_20px_40px_#52525b,_inset_0_-20px_40px_#3f3f46]
                 group-hover:[transform:rotateX(-40deg)_translateY(1px)]">
        <span class="bottom-right-text">@BintScripts</span>
      </div>
    </div>
  </section>
  <script>
    document.querySelector('.file').addEventListener('click', function() {
      this.classList.toggle('group-hover');
    });
  </script>
</body>
</html>