UI Design: Creating Cool OS X Flip Effect with CSS3 3D Rotation

There are two types of transform available in CSS3 specification, 2D and 3D. In our previous post, we have discussed on CSS3 Transform 2D. So, this time, we are going to look into transform elements in 3D space and specifically in this post, we are going to also create the OSX Flip Effect.

Click “View demo” below to see how the end result is going to look like.

OSX Flip Effect

As we mentioned above, we are going to apply CSS3 Transform to create the OSX or iOS flip effect. If you are using these OS, you probably are already familiar with these effects. In OSX, you can mostly find them in the Gadget of the Dashboard.

In the old days, creating such an effect is purely achieved with JavaScript libraries. But today, we are able to make it simpler by combining it with CSS3 Transform.

As you can see above, we contain the front and back face in two different <div>. At the front face, we will have a link, which will flip the Passbook when clicked. Whilst on the back face, we also have a link to flip it back.

CSS

I will assume you have created a new CSS file. In this stylesheet, we will first specify the Passbook dimension and set the transform style to preserve-3d, that way the child elements will be transformed into 3D as well. And, we also added a transition effect to make the flip run smoothly.