Animated Books with CSS 3D Transforms

A creative way to show interactive books using CSS 3D Transforms.

AnimatedBooks

From our sponsor: Squarespace is everything you need to sell anything: your brand, products, services, or content.

In this playground we’ll show you some creative, animated books with CSS 3D transforms and transitions.
We’ll show you two types of book designs: hardcover and paperback. Both were made to be easily modifiable in some of their content parts using CSS, images, anchors and some extra little details 🙂

Please note: this only works as intended in browsers that support the respective CSS properties.

Hardcover Book

AnimatedBooks_01

The hardcover book consists of three cubes: hardcover front, book spine and hardcover back. Each part uses pseudo-elements to provide some thickness.

cubes

Paperback

AnimatedBooks_02

In contrast to the hardcover, the paperback is a bit simpler. It is made from flat surfaces like the pages and does not include a book spine: paperback front, ruled paper and paperback back

:hover effects

For both books I use the technique of transitioning on “hover on” and “hover off” which is achieved by simply defining the “hover on” transition in the :hover class and the “hover off” transition in the original class declaration of the respective element.

Hover on

When we opened the book, the cover changes from “z-index: 100;” to 0.
The pages have different transition durations, which creates a smooth opening.


.book:hover > .hardcover_front {
	transform: rotateY(-145deg) translateZ(0);
	z-index: 0;
}

.book:hover > .page li:nth-child(1) {
	transform: rotateY(-30deg);
	transition-duration: 1.5s;
}

.book:hover > .page li:nth-child(2) {
	transform: rotateY(-35deg);
	transition-duration: 1.8s;
}

.book:hover > .page li:nth-child(3) {
	transform: rotateY(-118deg);
	transition-duration: 1.6s;
}

.book:hover > .page li:nth-child(4) {
	transform: rotateY(-130deg);
	transition-duration: 1.4s;
}

.book:hover > .page li:nth-child(5) {
	transform: rotateY(-140deg);
	transition-duration: 1.2s;
}

Hover off

When we close the book, we can avoid the overlapping of the pages on the cover by reducing the transition duration of the pages.


.hardcover_front{
	transition: all 0.8s ease, z-index 0.6s;
}

.page > li {
	width: 100%;
	height: 100%;
	transform-origin: left center;
	transition-property: transform;
	transition-timing-function: ease;
}

.page > li:nth-child(1) {
	transition-duration: 0.6s;
}

.page > li:nth-child(2) {
	transition-duration: 0.6s;
}

.page > li:nth-child(3) {
	transition-duration: 0.4s;
}

.page > li:nth-child(4) {
	transition-duration: 0.5s;
}

.page > li:nth-child(5) {
	transition-duration: 0.6s;
}

Cover Design

The cover design is pretty straightforward; I’ve added the class “coverDesign” as an initial configuration and a second class for backgrounds or images.

An alternative of placing an image on the cover is the following:

<img src="" width="100%" height="100%"></img>

To add a little red ribbon to the front cover, simply add:

<span class="ribbon"></span>

And that’s it! I hope it’s useful and inspiring!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 43

Comments are closed.
  1. Fantastic Marco !!
    really really nice cc3 concept !!
    thanks for share, congrats !

  2. Amazing – but your paperback example is missing the excellent shadows your hardcover has.

  3. Thank you! Very cool…!

    I’ve had limited success integrating these tutorials into WordPress at times. (not complaining! I’m just not ninja enough to yet to pull them all off.) Are there some best practices or gotchas to look out for you could recommend for WP integration. An iframe is always an option, but I’d prefer to link it directly to WP either through custom CSS or it’s own stylesheet.

    Again – thanks. Killer resource!

  4. Books Download Link – don’t work !? ))))))))))))))

    Thanks very Cool Tutorial! 😉

  5. Its a great tutorial. But please Codrops authors and editorial. In these examples there’s a download link that isn’t accessible for keyboard users.
    Try to focus more on accessibility of your CSS-only examples. People love your ideas, me too, but I can hardly use them.

  6. This is super nice but in IE10, images of the cover is not working and the other demo, the papers image inside doesn’t show.

  7. This is amazing Marco, Love the paper backs with the lined paper effect. Hope I can use this in a project one day

  8. This is fantastic. And it works wonderfully on nearly every browser except for IE (where the front cover is not showing). Do you all have any recommendations for making the front cover visible on IE?

  9. Awesome work! I have managed to pretty much get it working to my specs!

    Is it possible to activate the book opening with page onload with a specified delay?

    I am trying to use css animations, however, can’t figure it out 🙁

    Any help appreciated!

  10. hi please ; i want to knew if there is any tutorial about this great work ; ? cause i want to make fliping book with choosing pages and more ability of manipulation

  11. There’s some problem with the class=”coverDesign” when browse through updated Chrome browser. We need to set z-index: 1; in the css, and it will work fine! 🙂

  12. Front image/Content having problem in IE 11 and having same problem when page scroll. To fix this set
    .hardcover_front li:first-child {z-index:1}