Make the page count of a 3D book visible using CSS Custom Properties

Michael Scharnagl:

I am currently building a book section for this site and thought it would be cool to show the books in 3D and also to make it visible how many pages a book has. In this article I would like to show you how to use CSS custom properties to adapt the thickness of a 3D book showing how many pages the book has.

Using a --page-count custom property he defines the number of pages, which is then clamped between a minimum and a maximum (--page-count-range), and finally converted to a width in pixels (--page-width). The resulting <length> is then applied onto a 3D-rotated div that makes up the thickness of the book.

html {
  --page-count: 50;
  --page-count-range: clamp(1, calc(var(--page-count) / 50), 20);
  --page-width: calc(10px * var(--page-count-range));
}

.book__wrapper::before {
  width: var(--page-width);
  transform: translateX(calc(200px - var(--page-width) / 2 - 3px)) rotateY(90deg) translateX(calc(calc(var(--page-width)) / 2))
}

.book__wrapper::after {
  transform: translateZ(calc(var(--page-width) * -1));
}

Make the page count of a 3D book visible using CSS Custom Properties →
Demo →