From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Today we want to share an experimental book showcase concept with you. The idea is to make books look more realistic by using 3D transforms and apply some fun effects to them, like rotating, flipping and opening. This might be an interesting concept for online book stores as it adds some interactivity the user might find entertaining. The idea is taken from Lift Interactive (scroll down to see the book style).
Note that this only works in browsers that support CSS 3D transforms. For other browsers, we simply show the book cover.
The demos are best viewed in WebKit browsers.
What we did was to build a structure that we can transform into a 3D object with CSS 3D transforms. Our book has six main sides and one inner page element that we’ll use to paginate through some content, simulating something like a “view inside” functionality. We could have used the BookBlock jQuery plugin for flipping through the pages but we didn’t want to overload it with too many effects.
A book is build up as follows:
<div class="bk-book"> <div class="bk-front"> <div class="bk-cover"> <h2> <span>Anthony Burghiss</span> <span>A Catwork Orange</span> </h2> </div> <div class="bk-cover-back"></div> </div> <div class="bk-page"> <div class="bk-content bk-content-current"> <p>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</p> </div> <div class="bk-content"> <!-- ... --> </div> <div class="bk-content"> <!-- ... --> </div> </div> <div class="bk-back"> <p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture and murder. Alex is jailed for his teenage delinquency and the State tries to reform him - but at what cost?</p> </div> <div class="bk-right"></div> <div class="bk-left"> <h2> <span>Anthony Burghiss</span> <span>A Catwork Orange</span> </h2> </div> <div class="bk-top"></div> <div class="bk-bottom"></div> </div>
The class names are based on the sides of a book when holding it and looking at the front, the cover. Since we want to open the book cover, we need to give the front a main cover side and a back side. The back of the book will also contain some content which will be visible when flipping the book.
When hovering over a book, we will rotate it slightly.
Specifically, we rotate the whole book 35 degrees on the Y-axis:
.bk-list li .bk-book.bk-bookdefault:hover { transform: rotate3d(0,1,0,35deg); }
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
When opening the book by clicking on “View inside”, the front part will flip open and we can navigate through the preview pages by clicking on the arrows.
The rotations and flipping are done by applying certain classes:
/* Transform classes */ .bk-list li .bk-viewinside .bk-front { transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg); } .bk-list li .bk-book.bk-viewinside { transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg); } .bk-list li .bk-book.bk-viewback { transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg); }
In the second demo, we rotate the book so that we can only see the spine, the left side. On hover we simulate the familiar movement of taking a quick look of a book by slightly moving it towards us and rotating it. When clicking on it we will open it.
A second click on the book will close it again and put it back into the shelf.
Note that this is really just a concept and highly experimental. It’s probably very buggy and has much room for improvement. But anyway, we hope you enjoyed this experiment and find it inspiring!
You are awesome ^_^ superbbbbbbbbb
An addictive interactivity. Way to code!
Epic!
This is sick!
Brilliant idea!
You’re just too good! God bless your heart 🙂
Brilliant idea!
=-O A brilliant example of what we can do in modern browsers!
Amazing 3D book. Thanks.
I can never let my client who’s a publisher see this. He will force me to implement this into his site. lol
amazing !?
Epic and Amazing experiment!
Sensacional… show!
Really nice! Thanks.
Hey, if you can use the book project on another website?
This is a amazing!!!!! Congratulations!!
Codrops always amaze me… you have group of talented and gifted person in web development there….always excited when i receive email newsletter from Codrops…Keep Up The Great Work!! Thank you..
Like it . Very thanks .
Demo 2 is gr8. I love it. Mary you are simply superb.
You are superbbbbbbb
This is just phenomenal!!
Just “WOW” !!!!!
Amazing.. Thanks for sharing!
Not useful, but amazing!
what do you mean about not useful???
so naive, you dont creative i think….?
cheers^^
I suspect it is only this particular demo that is perceived as “not useful”. This interaction really only belongs in the physical world. There is no added value here for digital book readers. However, with a bit more creativity, I’m sure this CSS technique could be used in a more productive manner in the digital realm.
It’s really awesome, thank you for sharing !
You did it again: Absolutely Amazing! Fantastic!
Maravilhoso! Pararabéns!
Very good indeed. Thank you Mary~
Oh how I wish we wouldn´t have to think about “Can browser XY do this?” right NOW. What you show here is so damn cool! 😀
This is very cool. Now I’m just hoping a client comes along that needs something like this.
Thanks!
Mary Lou I love you :p
SMART!!!
This really is impressive. Thank you for showing this – I’m quite inspired!
This is exactly what i needed :O
Thanks a lot, i will steal this until the last line of code !
And theres not even some f*ckin JS OMG !!!1!!
Respect…
I love you.
It’s so cool.
Mary Lou,i love you!!
Thats really nice but i cant used it on the Explorer -.-
Totally fantastic – nice work
Awesome work you guys always Rocks.
Thanks
This is great, thanks for posting! This is some of the best looking 3D transitions I’ve seen with CSS3.
Thats really cool.
Awesome! May be it won’t be able to use in Dynamic, totally useful in Static Showcases. *shocked!
This is great !!
Awww juz loved it…..
Being a book-lover + an aspiring website designer,, dis was an eye candy….
Kudos..
<3
How would you add a left page in this? That’s the only thing I can’t seem to figure out…
wow
This is an amazing.
New post by creative and Genius web designer .
Thank ‘s a lot
Wow, very nice
This is an absolutely awesome experiment. Compliments. I love it.
Mary Lou will you marry me ? 🙂
Wonderful, but is there a fix for IE and Opera yet?
Thank you
Nice experiment. We modified it for our Product Showcase. We don´t use Books, but other Products:
http://showcase.instaprinter.de/
Magnificent!
very nice
how i can flip right to left book please help me.