Create a Flip Effect by Using CSS3

There’s some seriously cool transform and animation effects available through the webkit engine that can really spice up the web experiences for users with the Safari and Chrome browser. Here’s a quick look at how the transform property can produce a flip effect, and how it can be used to create a super fancy one!

* Safari or Chrome browser required to experience the Webkit effect.

The HTML

• Step 1: Create a maincontainer to position the cards
• Step 2: Create a card container to add more properties to the cards, when we hover over the container, the card should flip
• Step 3: Create a new div for the card itself
• Step 4: Create the front of the card, (in this case it is an image ‘UMBRELLA.png’)
• Step 5: Now we’re creating the back of the card, in this example I used a table but you can add whatever you want
• Step 6: At the end we’re creating a button

The CSS – Reset and Positioning

We’re adding the CSS-reset, the fonts, the background and we are positioning the mainContainer in the middle.

The CSS – Styling the Cards

In this section we are styling up the card, we are using border-radius and shadows to give our card a stylish effect.

The CSS – Adding the Animation

Starting at the top, the container divs are given a -webkit-perspective of 1000 to add some realism to the flip motion, otherwise it will all seem a little flat. Next, -webkit-transform-style deter­mines whether child ele­ments lie flat against their par­ent (“flat”) or remain in 3D space (“preserve-3d”). We’re animating the 3d transformation linearly for 0.2 seconds.

When the card is hovered by the mouse, a webkit transform of rotateY(180deg) is added, which rotates the object 180 degrees on the Y axis. -webkit-backface-visibility: hidden; is another fancy webkit property that is put to use on the face of each card. This ensures the opposite side of the card is no longer visible, without this the object would simply flip into a mirror image rather than display the other side.