15 CSS Book Effects
Collection of free HTML and CSS book effect code examples: 3d, animation, flip, layout, etc.
![Flipping Book - GIF Demo]( "Flipping Book")
About the code
Flipping Book
CSS only flipping book.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
![Book Group UI - GIF Demo]( "Book Group UI")
Made with
- HTML / CSS (SCSS) / JavaScript
About the code
Book Group UI
Book group UI with HTML, CSS and JS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
![Book Animation - GIF Demo]( "Book Animation")
Author
- Lyna Nguyen
About the code
Book Animation
HTML & CSS book animation.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Anna Sabatini
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: -
Author
- Robert Bunnysman
About the code
Book Flip Hover Effect
3D flip hover effects, book of congratulations.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Aysha Anggraini
About the code
Comic Book Style Layout
Good comic book style layout with CSS Grid.
Compatible browsers: Chrome, Firefox, Opera, Safari
Dependencies: -
Author
- Erin E. Sullivan
About the code
Book Layout
A responsive skeuomorph book layout, packed with fun little features.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
![3D Book Browsing - GIF Demo]( "3D Book Browsing")
Author
- Jon Kantner
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: -
Author
- Valeriya
About the code
Book Opening Animation
Book opening animation in pure CSS.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -
Author
- Chris Smith
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: -
![Book Flip - GIF Demo]( "Book Flip")
Author
- Thomas Podgrodzki
Made with
- HTML / CSS (less) / JavaScript
About the code
Book Flip
CSS book flip with little jQuery.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: jquery.js
![Jumpy Book Shelf - GIF Demo]( "Jumpy Book Shelf")
Author
- Ryan McLaughlin
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: -
Author
- Ana Tudor
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: -
![Animated Books with CSS 3D Transforms - GIF Demo]( "Animated Books with CSS 3D Transforms")
Author
- Marco Barria
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: -
![3D Book Showcase - GIF Demo]( "3D Book Showcase")
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: -