book-styles

1.book-perspective {
2  --book-default-width: 196;
3  --book-depth: 29cqw;
4  --book-border-radius: 6px 4px 4px 6px;
5  --hover-rotate: -20deg;
6  --hover-scale: 1.066;
7  --hover-translate-x: -8px;
8  --aspect-ratio: 49 / 60;
9  --bg-shadow: linear-gradient(
10      90deg,
11      hsla(0, 0%, 100%, 0),
12      hsla(0, 0%, 100%, 0) 12%,
13      hsla(0, 0%, 100%, 0.25) 29.25%,
14      hsla(0, 0%, 100%, 0) 50.5%,
15      hsla(0, 0%, 100%, 0) 75.25%,
16      hsla(0, 0%, 100%, 0.25) 91%,
17      hsla(0, 0%, 100%, 0)
18    ),
19    linear-gradient(
20      90deg,
21      rgba(0, 0, 0, 0.03),
22      rgba(0, 0, 0, 0.1) 12%,
23      transparent 30%,
24      rgba(0, 0, 0, 0.02) 50%,
25      rgba(0, 0, 0, 0.2) 73.5%,
26      rgba(0, 0, 0, 0.5) 75.25%,
27      rgba(0, 0, 0, 0.15) 85.25%,
28      transparent
29    );
30  perspective: 900px;
31  display: inline-block;
32  width: -moz-fit-content;
33  width: fit-content;
34}
35 
36@media (hover: hover) {
37  .book-perspective:hover .book-rotate-wrapper {
38    transform: rotateY(var(--hover-rotate)) scale(var(--hover-scale))
39      translateX(var(--hover-translate-x));
40  }
41}
42 
43.book-rotate-wrapper {
44  aspect-ratio: var(--aspect-ratio);
45  width: -moz-fit-content;
46  width: fit-content;
47  transform: rotate(0deg);
48  position: relative;
49  transform-style: preserve-3d;
50  min-width: calc(var(--book-width) * 1px);
51  transition: transform .25s ease-out;
52  container-type: inline-size;
53}
54 
55.book-rotate-wrapper > :first-child {
56  position: absolute;
57  min-width: calc(var(--book-width) * 1px);
58}
59 
60.book-rotate-wrapper .book-pages {
61  background: linear-gradient(90deg, #eaeaea, transparent 70%),
62    linear-gradient(#fff, #fafafa);
63}
64 
65.book-rotate-wrapper .book-pages.book-textured {
66  background: repeating-linear-gradient(
67    90deg,
68    #fff,
69    #efefef 1px,
70    #fff 3px,
71    #9a9a9a 0
72  );
73}
74 
75.book-rotate-wrapper .book-pages {
76  height: calc(100% - 2 * 3px);
77  width: calc(var(--book-depth) - 2px);
78  top: 3px;
79  position: absolute;
80  transform: translateX(
81      calc(var(--book-width) * 1px - var(--book-depth) / 2 - 3px)
82    )
83    rotateY(90deg) translateX(calc(var(--book-depth) / 2));
84}
85 
86.book-rotate-wrapper .book-back {
87  position: absolute;
88  left: 0;
89  width: calc(var(--book-width) * 1px);
90  height: 100%;
91  border-radius: var(--book-border-radius);
92  transform: translateZ(calc(-1 * var(--book-depth)));
93}
94 
95.book-rotate-wrapper.book-stripe .book-content {
96  gap: calc((24px / var(--book-default-width)) * var(--book-width));
97}
98 
99.book-rotate-wrapper.book-stripe .book-content .book-title {
100// … truncated