Flipping Book in CSS and jQuery
- Mar 25, 2013
For this tutorial you will have to have some knowledge of HTML and CSS. You can also just copy and paste and change the values to see how it works. I am still learning and improving my CSS and jQuery skills but I think it's good to share and will try to do that in this post. Feel free to leave comments with suggestions on how to improve our coding skills.
The first step is to create the design. My idea was to create a simple 3 fold brochure, so I put together a basic mock in Illustrator
Now let's create the basic HTML for the document. Basically what we have to create is 5 squares to use as each one of the folds. To do that I will create a basic container using the tag "section" and the 5 squares with the tag "article"
Let's start add some visuals with CSS. First thing is to create the different parts of the brochure and also the position of each one of them, not worrying too much about the vertical positions.
Now let's start flipping the cards and putting in the right position. It's important to understand how CSS transform works so we can write the css. Here's the summary of what we need to do:
- #cover: This card will flip from right to left, so the origin (-webkit-transform-origin) will have to be left horizontally.
- #backcover: This card will be flipped, so you will have to move it to the 0 position left, but flipped 180 to the right. Use -webkit-backface-visibility:hidden to hide it when its rotated.
- #centerflip will behave like the #cover but the origin will be right instead of left.
- #centerback will behave like the #backcover but flipping to the other side, also you will have to position it to the right.
Here's the full CSS code
The easiest way to write the script is understand exactly the logic/behavior we want to have
- User clicks on the #cover and the #cover flips 180deg. The #backcover that is flipped 180deg will flip to 0deg
- The #centerflip when clicked will flip 180deg. The #centerback that is flipped -180deg will flip to 0deg.
- Once the brochure is open we will set a variable saying that it's open so we can close the brochure by clicking on it again.
Here's the code for that
This is a basic demo of CSS transformations, it will only run on Webkit browsers for this demo. You can make it work for other browsers by adding their prefixes in the code. The idea is trying to motivate you that is starting out your web design career, to prototype more, to play with code to see how things will behave. That will definitely give you a different and better understanding about design in general.