From 36ba09479e6751e33b3a0aa282240f32b4023f59 Mon Sep 17 00:00:00 2001
From: ache <ache@ache.one>
Date: Tue, 22 Feb 2022 00:58:56 +0100
Subject: Add css biblio

---
 src/css/bibli.scss | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 128 insertions(+)
 create mode 100644 src/css/bibli.scss

diff --git a/src/css/bibli.scss b/src/css/bibli.scss
new file mode 100644
index 0000000..1b171a4
--- /dev/null
+++ b/src/css/bibli.scss
@@ -0,0 +1,128 @@
+
+.book-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 600px;
+}
+@keyframes initAnimation {
+  0% {
+    transform: rotateY(0deg);
+  }
+  100% {
+    transform: rotateY(-30deg);
+  }
+}
+.book {
+  width: 170px;
+  height: 260px;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: rotateY(-30deg);
+  transition: 1s ease;
+  animation: 1s ease 0s 1 initAnimation;
+
+ &:hover {
+  transform: rotateY(0deg);
+  }
+
+  > :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: red;
+    width: 170px;
+    height: 260px;
+    transform: translateZ(25px);
+    background-color: #01060f;
+    border-radius: 0 2px 2px 0;
+    box-shadow: 5px 5px 10px #666;
+  }
+  &::before {
+    position: absolute;
+    content: ' ';
+    background-color: blue;
+    left: 0;
+    top: 3px;
+    width: 48px;
+    height: 254px;
+    transform: translateX(142px) rotateY(90deg);
+    background: linear-gradient(90deg, 
+      #fff 0%,
+      #f9f9f9 5%,
+      #fff 10%,
+      #f9f9f9 15%,
+      #fff 20%,
+      #f9f9f9 25%,
+      #fff 30%,
+      #f9f9f9 35%,
+      #fff 40%,
+      #f9f9f9 45%,
+      #fff 50%,
+      #f9f9f9 55%,
+      #fff 60%,
+      #f9f9f9 65%,
+      #fff 70%,
+      #f9f9f9 75%,
+      #fff 80%,
+      #f9f9f9 85%,
+      #fff 90%,
+      #f9f9f9 95%,
+      #fff 100%
+      );
+  }
+
+  &::after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    content: ' ';
+    width: 170px;
+    height: 260px;
+    transform: translateZ(-25px);
+    background-color: #01060f;
+    border-radius: 0 2px 2px 0;
+    box-shadow: -10px 0 30px 10px #666;
+  }
+}
+#container {
+  display: flex;
+  flex-flow: row wrap;
+  padding: 0 5px 0px 5px;
+  div .book {
+    top: 15px;
+    left: 15px;
+  }
+  section {
+    width: 222px;
+    height: 331px;
+    margin: 10px;
+    transform-style: preserve-3d;
+    overflow: hidden;
+    position: relative;
+    transition: all 0.55s ease;
+    transform-style: preserve-3d;
+    .jv {
+      width: 444px;
+      height: 662px;
+      transition: all 0.55s ease;
+      background: linear-gradient( to top right, rgba(255, 255, 255, 0) 65%, rgba(255, 255, 255, 0.5) 70%);
+      background-position: 0 -100px;
+      &:hover {
+        background-position: -100px 0px;
+        transition: all 1s ease;
+      }
+    }
+    &:hover {
+      transform: scale(1.02) perspective(800px) rotateX(5deg);
+    }
+  }
+}
+@keyframes shine {
+  to {
+    opacity: 1;
+    bottom: -30%;
+    right: 150%;
+  }
+}
+
-- 
cgit v1.2.3