3D animated books with CSS
You never know the power of CSS! With the development of tech, the CSS became more creative and powerful, even though it’s the basic knowledge when you step into the developer’s field.
Making it 3D! When mention 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.
First comimg with the structure of the building, the html part.
The book is the box of the playground.
The four sides of the book vertically is inside the div named span tag.
The top is the side of the book as we can see.Btw, I ignored the bottomside of the book, because we can’t see it when animated,right? :)
Then the most important part is CSS.
The font is from goole online font.
And the basic setting for centring the book.
The book positioned with the angles , the “transform” rotates the sides of book.
For the infinite animation , the degree of rotation controls the animation.
Every side is positioned center and the book size herited from the book setting above.
Thanslate3d changed the css world with 3d effects. The three values are the x,y,z direction, representing the abscissa of the translating vector. MDN
The first child of the span is the cover of the book. All the add-on sets with psedou element, such as the cover is filled with text and a gif.
The same for the rest of sides.
The second child is the right side of book and so on.
The top is the paper side.
And for good looking, I add the background image. I was trying to rotate the written lines, but it did’t work during my test. I still think this is the neat and quick way to do. If anyone can do it without background iamge ,please teach me.:)
And for the shadow of the book.
With the filter to blend it away.
I think the most struggle thing is to decide the transform position. I’d test on Google browser which is live.
