3D Flipping Circle with CSS3 and jQuery

Mary Lou would like to show you how to create a little component with a realistic touch. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle. She’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

So, let’s start with the markup. Mary Lou will use some divisions for the shading effects, the handle pieces and the circle parts. What she need, is a main wrapper with the class fc-wrapper which will be a circle. On top of that she will add an overlay which will make the right part of the circle darker once she open the rest. From this lower-most circle Mary Lou will actually just see the right part. The div with the class fc-handle-pull will be the right-most handle piece outside of the circle. She’ll add a container for the perspective and inside she’ll add the mentioned overlay for the right part and also the second handle piece (it looks like one, but it’s actually two pieces) which has the class fc-handle-out.