3D animated books with CSS

YvonneDev
3 min readSep 10, 2021

You never know the power of CSS! With the development of tech, CSS became more creative and powerful, even though it’s basic knowledge when you step into the developer’s field.

Making it 3D! When mentioned about 3D, the language always comes to my mind is “three.js” which is popular and dramatically powerful with Javascript knowledge needed. Yeah, it definitely needs work to follow up. But the CSS one is the easiest way to make the screen live.

Live demo

First coming with the structure of the building, the HTML part.

The book is the box of the playground.

The four sides of the book vertically are inside the div named span tag.

The top is the side of the book as we can see.Btw, I ignored the bottom side of the book, because we can’t see it when animated, right? :)

Then the most important part is CSS.

The font is from google online font.

--

--

YvonneDev
YvonneDev

Written by YvonneDev

❤️Front-end Web Development self-taught *share what I learned*