Animated Books with CSS 3D Transforms

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

From our monthly sponsor: Ship customer-facing metrics fast with Keen.io. Collect, store, query, & display stunning analytics.

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:

Marco spends most of his time as a designer and front-end developer. His hobbies are to experiment with new technologies and he loves CSS.

http://codepen.io/fixcl

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 43

Comments are closed.
  1. 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! 🙂

  2. 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}