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 →

Published by Bramus!

Bramus is a Freelance Web Developer from Belgium. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.