Collection of free HTML and CSS book effect code examples: 3d, animation, flip, layout, etc. Update of June 2019 collection. 5 new items.

Demo image: Single DIV Book

Creator

  • Poulami Chakraborty

Programming language

  • HTML / CSS

Information a code

Single DIV Book

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Nayara Alves

Programming language

  • HTML / CSS (SCSS)

Information a code

CSS-Only Foundation Book Preview

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: 3D Book Design

Creator

  • Mina Mounir

Programming language

  • HTML / CSS

Information a code

3D Book Design

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: 3D Book

Creator

  • Tim Holman

Programming language

  • HTML / CSS

Information a code

3D Book

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Creator

  • Thea

Programming language

  • HTML / CSS

Information the code

George Orwell 1984 Book Cover

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies:

Demo image: Flipping Book Flipping Book - GIF Demo

Creator

  • Dhanish

Programming language

  • HTML / CSS

Information the code

Flipping Book

CSS only flipping book.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Creator

  • Yancy Min

Programming language

  • HTML / CSS

Information the code

Books Hover Animation

Pure CSS book hover animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies:

Demo image: Book Group UI Book Group UI - GIF Demo

Creator

  • NVC

Programming language

  • HTML / CSS (SCSS) / JavaScript

Information the code

Book Group UI

Book group UI with HTML, CSS and JS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Book Animation Book Animation - GIF Demo

Creator

  • Lyna Nguyen

Programming language

  • HTML / CSS

Information the code

Book Animation

HTML & CSS book animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: 3D Book

Creator

  • Anna Sabatini

Programming language

  • HTML / CSS

Information the code

3D Book

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Book Flip Hover Effect

Creator

  • Robert Bunnysman

Programming language

  • HTML / CSS

Information the code

Book Flip Hover Effect

3D flip hover effects, book of congratulations.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Comic Book Style Layout

Creator

  • Aysha Anggraini

Programming language

  • HTML / CSS (SCSS)

Information the code

Comic Book Style Layout

Good comic book style layout with CSS Grid.

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Demo image: Book Layout

Creator

  • Erin E. Sullivan

Programming language

  • HTML / CSS

Information the code

Book Layout

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: 3D Book Browsing 3D Book Browsing - GIF Demo

Creator

  • Jon Kantner

Programming language

  • HTML (Pug) / CSS (SCSS)

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Book Opening Animation

Creator

  • Valeriya

Programming language

  • HTML / CSS

Information the code

Book Opening Animation

Book opening animation in pure CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Responsive Comic Book Layout

Creator

  • Chris Smith

Programming language

  • HTML / CSS

Information 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.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Book Flip Book Flip - GIF Demo

Creator

  • Thomas Podgrodzki

Programming language

  • HTML / CSS (less) / JavaScript

Information the code

Book Flip

CSS book flip with little jQuery.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: jquery.js

Demo image: Jumpy Book Shelf Jumpy Book Shelf - GIF Demo

Creator

  • Ryan McLaughlin

Programming language

  • HTML / CSS (SCSS)

Information 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!

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies:

Creator

  • Fabrizio Bianchi

Programming language

  • HTML (Haml) / CSS

Information 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.

Browser Support: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies:

Demo image: Pure CSS Animal Book

Creator

  • Ana Tudor

Programming language

  • HTML (Haml) / CSS (SCSS)

Information the code

Pure CSS Animal Book

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Animated Books with CSS 3D Transforms Animated Books with CSS 3D Transforms - GIF Demo

Creator

  • Marco Barria

Programming language

  • HTML / CSS / JavaScript

Information the code

Animated Books with CSS 3D Transforms

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

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: 3D Book Showcase 3D Book Showcase - GIF Demo

Creator

  • Mary Lou

Programming language

  • HTML / CSS / JavaScript

Information the code

3D Book Showcase

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: