Könyv

.hfx-page-turn {
  --c: var(--hfx-color, #3b82f6);
  --line: color-mix(in srgb, var(--c) 18%, transparent);
  font-size: var(--hfx-size, 16px);
  position: relative;
  display: flex;
  width: 13em;
  height: 8.4em;
  padding: 0.3em;
  border-radius: 0.4em;
  background: color-mix(in srgb, var(--c) 75%, #000);
  perspective: 50em;
  font-family: system-ui, sans-serif;
}
.hfx-page-turn-page {
  position: relative;
  flex: 1;
  background:
    repeating-linear-gradient(transparent 0 0.5em, var(--line) 0.5em 0.6em) 0.7em 1.9em / calc(100% - 1.4em) 4.7em no-repeat,
    linear-gradient(var(--line), var(--line)) 0.7em 0.9em / 55% 0.55em no-repeat,
    #fffdf8;
}
.hfx-page-turn-page b {
  position: absolute;
  bottom: 0.4em;
  font-size: 0.6em;
  color: color-mix(in srgb, var(--c) 50%, #6b7280);
}
.hfx-page-turn-left,
.hfx-page-turn-back {
  border-radius: 0.2em 0 0 0.2em;
  box-shadow: inset -1.2em 0 1em -1em color-mix(in srgb, #000 30%, transparent);
}
.hfx-page-turn-under,
.hfx-page-turn-front {
  border-radius: 0 0.2em 0.2em 0;
  box-shadow: inset 1.2em 0 1em -1em color-mix(in srgb, #000 30%, transparent);
}
.hfx-page-turn-left b,
.hfx-page-turn-back b {
  left: 1.1em;
}
.hfx-page-turn-under b,
.hfx-page-turn-front b {
  right: 1.1em;
}
.hfx-page-turn-back {
  background:
    radial-gradient(circle at 70% 35%, #fef3c7 0 0.45em, transparent 0.5em) 0.7em 0.7em / calc(100% - 1.4em) 3.6em no-repeat,
    linear-gradient(160deg, color-mix(in srgb, var(--c) 35%, #fff), var(--c)) 0.7em 0.7em / calc(100% - 1.4em) 3.6em no-repeat,
    repeating-linear-gradient(transparent 0 0.5em, var(--line) 0.5em 0.6em) 0.7em 4.5em / calc(100% - 1.4em) 2.1em no-repeat,
    #fffdf8;
}
.hfx-page-turn-leaf {
  position: absolute;
  top: 0.3em;
  bottom: 0.3em;
  left: 50%;
  right: 0.3em;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.45, 0.05, 0.2, 1);
}
.hfx-page-turn-leaf .hfx-page-turn-page {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
}
.hfx-page-turn-leaf .hfx-page-turn-back {
  transform: rotateY(180deg);
}
.hfx-page-turn:hover .hfx-page-turn-leaf {
  transform: rotateY(-180deg);
}

@media (prefers-reduced-motion: reduce) {
  .hfx-page-turn, .hfx-page-turn *, .hfx-page-turn::before, .hfx-page-turn::after, .hfx-page-turn *::before, .hfx-page-turn *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Ehhez az animációhoz nincs külön JavaScript.