26 CSS Book Effects

About a code

3D Ebook Flip Animation

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Turning Pages with CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Coffee Table Book Effect

Add a containing div to turn an image into coffee table book.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS Books

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

Single DIV Book

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

CSS-Only Foundation Book Preview

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

3D Book Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About a code

3D Book

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

George Orwell 1984 Book Cover

George Orwell 1984 book cover with hover effect in HTML, SVG and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

About the code

Flipping Book

CSS only flipping book.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Books Hover Animation

Pure CSS book hover animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About the code

Book Group UI

Book group UI with HTML, CSS and JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

About the code

Book Animation

HTML & CSS book animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

3D Book

This book was created using HTML and CSS only. It has some CSS animations on mouse-hover.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Book Flip Hover Effect

3D flip hover effects, book of congratulations.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Comic Book Style Layout

Good comic book style layout with CSS Grid.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About the code

Book Layout

A responsive skeuomorph book layout, packed with fun little features.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

3D Book Browsing

A CSS-only demo that simulates picking books off a shelf and previewing a page (on hover) in first-person. It all works using labels and offscreen radio inputs for each book, and a reset input as a return button allows you to put everything back to its original position.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Book Opening Animation

Book opening animation in pure CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Responsive Comic Book Layout

A responsive layout using flexbox with narrative text and speech bubbles styled in CSS. Background patterns also in CSS. The only acceptable use of Comic Sans font.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Book Flip

CSS book flip with little jQuery.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

About the code

Jumpy Book Shelf

This animation is purely an easter egg. We try and put in a little unexpected fun wherever we can when designing our products. This was part of the Helix Cup web app we just launched where one of the experience tenants was simply: ‘fun’. The books were used on a downloadable resource panel, but if you happen to move your mouse over them, they will jump!

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

About a code

CSS 3D Bending Effect - Page Flip

CSS only experiment. Page flip with bending effect. Works only on browsers that support transform-style: preserve-3d.

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: -

About the code

Pure CSS Animal Book

Move mouse cursor from left to right/ right to left.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

Animated Books with CSS 3D Transforms

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

About the code

3D Book Showcase

An experiment about a realistic looking book showcase with some interactivity using CSS 3D transforms.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -